将“！important”与伪类“：not”一起使用时的预期行为是什么

Question

我正在清理别人的代码，基本上看起来像这样：

a {color:red;}
#contentdiv :not(h4) > a {color:green!important}

因此，所有链接均为绿色，但h4以下的链接为红色。

假设“ li”下的所有链接也必须为红色。 更好的是，假设“ li”下的链接需要继承用户在此特定CMS中输入的内容，因此颜色可以更改，而无需在样式表中进行声明。

换一种说法...

#contentdiv ul li a {color:red!important}

...将不起作用，因为当“ a”标签上的全局样式更改时，“ li”下的“ a”标签将保持红色。

但是试图否定“！重要”，如...

a {color:red;}
#contentdiv :not(h4) > a,
#contentdiv :not(li) > a {color:green!important}

...似乎只是抵消了两种否定。 我知道“：not”伪代码应该像“（！A和！B）”一样工作，但是添加重要内容似乎使它成为目标A或B补码“（A / *或B / *）”的意思是，所有内容都会变成绿色，甚至“ h4”和“ li”下的“ a”标签。

这是一个JSFiddle： https ://jsfiddle.net/qebz4bbx/2/

只是想对此进行一些澄清。 谢谢！

Answer 1

你误解了逗号, 。

逗号是逻辑或，而不是逻辑与。

因此，

#contentdiv :not(h4) > a,
#contentdiv :not(li) > a

匹配每个元素

• 是a元素，其父代不是h4元素，并且该父代是id="contentdiv"的元素的后代。
• 要么
• 是a元素，其父级不是li元素，并且该父级是id="contentdiv"的元素的后代。

因此，您的选择器等效于#contentdiv * > a 。

相反，您应该使用

#contentdiv :not(h4):not(li) > a

匹配每a元素的父是既不是h4元件，也不是li元件，并且该父是与元素的后代id="contentdiv" 。