CSS :not 选择器未正确应用答案

【问题标题】：CSS :not selector is not applying correctlyCSS :not 选择器未正确应用
【发布时间】：2015-02-17 14:03:20
【问题描述】：

我正在尝试将样式应用于除 .reset-this 和 .reset-this 的后代元素之外的所有元素。我的 CSS 不工作。它不适用于任何元素。

*:not(.reset-this, .reset-this *) { //styles in here }

要查看它如何不工作的实时示例，请转到此 Fiddle：http://jsfiddle.net/sh39L882/1/

【问题讨论】：

【解决方案1】：

在 CSS 3 中，更具体地说是 Selectors Level 3：

否定伪类 :not(X) 是一个以简单选择器（不包括否定伪类本身）作为参数的函数式表示法。

这里的关键是simple selector。 :not 只能访问像 .classsName 这样的简单选择器，而不是带有 , 或 .className .child 的东西。

但请注意，这已在 Selectors Level 4 中更新：

否定伪类 :not() 是一个以选择器列表为参数的函数式伪类。

注意simple selector 更改为selector list。这意味着您尝试做的事情将是可能的，但仅限于实现新规范的浏览器。

您始终可以广泛应用这些样式，然后再还原它们：

* {
  color: red
}

.reset-this, .reset-this * {
  color: black;
}

但那是相当可怕、粗俗和丑陋的。正如您所评论的，最好设计您的类结构来避免这种情况。

【讨论】：

谢谢。我找到了解决我的具体问题的方法，就是将类“X”添加到父类的每个后代，这样我就可以使用满足“简单选择器”的“:not(.X)”要求。
尤其是对于像color 这样的继承属性，您永远不会想对* 应用硬值。如果您希望这些属性适用于所有元素，请将它们设置为 body 并让所有后代正常继承。不要试图对抗继承链。

【解决方案2】：

很遗憾，您的风格必须更加具体。

首先，通配符 (*) 选择器不能与伪类一起使用，因为它太宽泛了 - 它基本上否定了这里的 :not。相反，您可以使用body :not。

另外，伪类不能被继承。最好的选择是让您的后代继承其父代的样式。

【讨论】：

【解决方案3】：

试试这个：

*:not(.reset-this), .reset-this * {
    color:red;
}

【讨论】：