当“！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”标签将保持红色。

然而，试图否定“！important”之类的......

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

您误解了逗号,。

逗号是逻辑OR，而不是逻辑AND。

因此，

#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"的元素的后代。