CSS:not选择器应用不正确

Question

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

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

要查看它如何不起作用的真实示例，请访问以下Fiddle：http://jsfiddle.net/sh39L882/1/

Answer 1

在CSS 3中，更具体地说，Selectors Level3:

否定伪类：not（X）是一种以简单选择器（不包括否定伪类本身）为参数的函数表示法。

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

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

否定伪类：not（）是一个以选择器列表为参数的函数伪类。

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

你总是可以广泛地应用样式，然后恢复它们：

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

但这是非常可怕、恶心和丑陋的。正如您所评论的，最好设计类结构来避免这种情况。

Answer 2

不幸的是，您必须更加具体地使用您的样式。

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

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

查看更新后的小提琴：http://jsfiddle.net/r4upf/sh39L882/2/

Answer 3

试试这个：

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

http://jsfiddle.net/ymrsx8cx/