为什么 CSS :not 伪类不能按预期工作？答案

【问题标题】：Why CSS :not pseudo-class doesn't work as expected?为什么 CSS :not 伪类不能按预期工作？
【发布时间】：2013-05-08 03:56:19
【问题描述】：

考虑以下 HTML：

<div class="a">
    <div class="b">Hello</div>
  </div>
  <div class="c">
    <div class="b">World</div>
</div>

如预期的那样，仅将以下 CSS 颜色添加为红色的“世界”：

.c .b {
  color: red;
}

:not(.a) .b {
  color: red;
}

为什么？

【问题讨论】：

【解决方案1】：

你需要这样给它：-

div:not(.a) .b {
  color: red;
}

语法是 selector:not(){ properties }

【讨论】：

语法实际上并不要求 :not() 被任何东西限定，但无论如何这是一个好习惯。
感谢@BoltClock，但查看文档中的语法和示例并尝试不使用:not(.a) .b，它至少在 Chrome 中没有做出适当的选择。我自己也用过这种方式..可能我错过了一些东西..：|
是的，我的基本意思是它可以在没有“选择器”部分的情况下工作，但就像你提到的那样，它并没有达到你的预期。另请参阅我对该问题的评论链接。
@Mr Lister：嗯？他们确实根据规范等效地处理它们......
@BoltClock 抱歉，我在寻找这些答案之外遇到了麻烦，结果证明这是不正确的。

【解决方案2】：

由于:not 伪类表示的元素没有由它的参数表示，您必须在:not选择器之前指定要排除的元素

根据你的例子，试试这个：

div:not(.a) .b {
  color: red;
}

【讨论】：