CSS :not 选择器应用不正确

Question

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

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

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

Answer 1

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

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.

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

的东西

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

The negation pseudo-class, :not(), is a functional pseudo-class taking a selector list as an argument.

请注意 simple selector 更改为 selector list。这意味着您尝试做的事情将成为可能，但只能在实现新规范的浏览器中实现。

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

* {
  color: red
}

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

但这非常糟糕、粗俗和丑陋。正如您所评论的，最好设计您的 class 结构来避免这种情况。

Answer 2

遗憾的是，您的样式必须更加具体。

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

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

Answer 3

试试这个：

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

CSS :not selector is not applying correctly