css - "!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 and !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" 的元素的后代.