CSS中的:not选择器未正确应用

Question

我试图对除了.reset-this及其子元素以外的所有元素应用样式，但我的CSS没有生效，它不适用于任何元素。

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

如果您想看一个实时的例子来展示它是如何未能正常工作的，请访问这个Fiddle：http://jsfiddle.net/sh39L882/1/

- Dane Iracleous

---

据我所知，:not() 只允许一个 简单选择器 作为其参数，这就是为什么你的尝试不起作用的原因。 - Adrift

你有没有任何理由不能为 .reset-this（以及任何子元素）声明不同的样式？ - Jhecht

是的 - 因为 .reset-this 应该是一个无样式区域，所有后代元素都应该保持纯净并且与浏览器默认设置一致。这是我项目的特定要求。 - Dane Iracleous

Answer 1

在CSS 3中，更具体地说是选择器级别3：

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

关键在于简单选择器。 :not只能访问像.className这样的简单选择器，而不能访问含有,或.className .child的选择器。

请注意，这已在选择器级别4中进行了更新：

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

请注意将简单选择器更改为选择器列表。 这意味着您尝试做的事情将成为可能，但仅在实现新规范的浏览器中才能实现。

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

* {
  color: red
}

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

但这样做非常糟糕、恶心和丑陋。正如您所评论的那样，最好设计您的类结构以避免这种情况。

- loganfsmyth

---

谢谢。我已经找到了解决我的特定问题的方法，那就是将类“X”添加到父类的每个后代中，这样我就可以使用“:not(.X)”，从而满足“简单选择器”的要求。 - Dane Iracleous

特别是对于继承属性，例如 color，您永远不要将硬值应用于 *。如果您希望这些属性适用于所有元素，请在 body 上设置它们，并让所有后代正常继承。不要试图打破继承链。 - BoltClock

Answer 2

很遗憾，您需要更具体地指定您的样式。

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

此外，伪类不能被继承。最好的替代方法是让您的后代元素继承其父元素的样式。

请参见更新的 fiddle: http://jsfiddle.net/r4upf/sh39L882/2/

- Ross

---

实际上，:not() 不是伪元素（而是伪类），* 可以与伪元素一起使用 -- 供您参考。 - Adrift

谢谢指出这个问题 - 我混淆了两个概念。不过，伪类不能与 * 一起使用。 - Ross

Answer 3

试试这个：

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

http://jsfiddle.net/ymrsx8cx/

- user2481984

---

所有4行文本都是红色的，但目标是只使第一行和最后一行变为红色。我试图排除.reset-this及其所有子元素。 - Dane Iracleous