CSS在最小化時被破壞

我有一個網站，我們正在使用一個工具來最小化和壓縮CSS代碼。它被稱爲JCH，它是Joomla的插件，我想你也可以在Drupal上使用它。我有一個問題，這個CSS代碼：CSS在最小化時被破壞

#sp-user3 .help-menu .nav.menu :not(.user-menu){ 
display: inline-flex; 
}

它被轉換爲：

#sp-user3 .help-menu .nav.menu:not(.user-menu){display:inline-flex}

正如你可以看到「.nav.menu：沒有」轉換爲」 .nav.menu：不「這會導致css規則無法按預期應用。

這可能是該工具的錯誤。我如何重寫它或添加一個字符以避免混淆？任何想法都歡迎。

2017-08-28 Eduardo

CSS標準會說你可以使用>>作爲後代組合子;這將允許你編寫'.nav.menu >>：not'而不是'.nav.menu：not'。目前不在任何瀏覽器中工作，所以這不是答案。 –

你可以嘗試'.nav.menu *：not'（帶星號），但我沒有最小化器，所以我不能檢查它是否可行。 –

@MrLister我會試試看。 – Eduardo

這確實是一個錯誤，這不是我第一次遇到它。

這個網站上的StackSnippet編輯器在它的Tidy按鈕中曾經有過相同的錯誤。請參閱我的bug report。它很快就被修復了。

所以你可以用JCH提交一個錯誤報告，然後等待它被修復。

同時，您可以在CSS中的:之前插入一個*作爲解決方法。
:not()無論如何都是*:not()的簡寫，所以你不會改變選擇器的含義，只是寫出所有暗示的內容。

2017-08-28 19:53:38

這是一個絕對的工具問題，網絡縮小器如Minify生成正確的代碼。

#sp-user3 .help-menu .nav.menu :not(.user-menu){display:inline-flex}

2017-08-28 17:56:36

是的，我也這麼認爲。有一個問題「：not（.user-menu）」是指標籤內部具有「.nav和.menu」類的標籤嗎？還是它指的是具有「nav.menu」的相同標籤？（我沒有編寫CSS規則） – Eduardo

上面的CSS規則表示* display：inline-flex *對於類：* help-menu *，* nav menu *而不是* user-menu *。 –

回答