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