当“!important”与伪 class“:not”一起使用时，预期的行为是什么
What is the expected behavior when "!important" is used with the pseudo-class ":not"
我正在清理别人的代码，它基本上是这样的：
a {color:red;}
#contentdiv :not(h4) > a {color:green!important}
因此所有链接都是绿色的，除了 h4 下的链接是红色的。
假设 "li" 下的所有链接也需要是红色的。更妙的是，假设 "li"s 下的链接需要继承用户在此特定 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/
只是想对此进行一些澄清。谢谢！
您误解了逗号 ,。
逗号是逻辑或，不是逻辑与。
因此，
#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" 元素的后代。
我正在清理别人的代码，它基本上是这样的：
a {color:red;}
#contentdiv :not(h4) > a {color:green!important}
因此所有链接都是绿色的，除了 h4 下的链接是红色的。
假设 "li" 下的所有链接也需要是红色的。更妙的是，假设 "li"s 下的链接需要继承用户在此特定 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/
只是想对此进行一些澄清。谢谢！
您误解了逗号 ,。
逗号是逻辑或，不是逻辑与。
因此，
#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" 元素的后代。