CSS：not（）選擇器影響其他元素，我錯過了什麼？

我有以下的測試代碼：CSS：not（）選擇器影響其他元素，我錯過了什麼？

<html> 
<head> 
    <style type="text/css"> 
     #test, .random-class { font-weight:bold; } 
     #test, .random-class:not('.another-class') { color:red; } 
    </style> 
</head> 
<body> 
    <div id="test">hello world</div> 
</body> 
</html>

這將產生以下的輸出：

在我的理解，世界你好應該大膽的紅色，但它只是大膽。我預計第二規則來影響

id爲測試元素或
帶班.random級而不是類。另一個類的任何元素

我在這裏錯過了什麼？爲什麼第二條規則不適用？

來源

2016-10-31 destiny

嘗試使用此 '#TEST，.random級：沒有（。另一級）{顏色：紅;}' – ArmKh

你不需要類周圍的報價在你:not()選擇，如果你改變它，所以它變成了：

#test, .random-class:not(.another-class) 
{ 
    color:red; 
}

，你期望它

看看這裏它將工作對於demo

看看here在文檔上:not()選擇

在評論中提到的@KWeiss：

具體的報價正在選擇無效，所以規則不適用

希望這有助於！

來源

2016-10-31 10:04:26 Simplicity

特別是引號使選擇器無效，因此規則不適用。 – KWeiss

你不需要在使用'：不

#test, .random-class { font-weight:bold; } 
#test, .random-class:not(.another-class) { color:red; }

來源

2016-10-31 10:07:04 Mikl

第二條規則不適用，因爲在你的語法時才，打破了整個規則，而不僅僅是選擇器壞了一個錯誤。

:not(.abother-class)是前述正確的語法（不帶引號

如果您的分離規則分爲兩個你會得到你想要的效果，如將固定誤差如這兩種解決方案應該工作：

#test {color: red} 
.random-class:not('.another-class') {color: red} /*This is still broken, but doesn't effect the above rule now*/

或

#test, .random-class:not(.another-class) {color: red} /* fixed*/

來源

2016-10-31 10:09:41

CSS：not（）選擇器影響其他元素，我錯過了什麼？

回答

相關問題