如何在 CSS（使用属性）中选择不是另一个元素的后代的元素答案

【问题标题】：How select an element in CSS (using attribute) that is NOT a descendant of another element如何在 CSS（使用属性）中选择不是另一个元素的后代的元素
【发布时间】：2012-01-30 03:15:05
【问题描述】：

在重新阅读 CSS2.1 和 CSS3 选择器规范后，我怀疑这是不可能的，但你永远不会知道。

如果我可以选择一个 p 元素，那就是使用 CSS decendant 选择器的其他 p 元素的后代：

p p {};

有什么方法可以否定后代选择器，并且仍然选择类型，所以我可以选择 p 元素，除了那些是其他 p 元素的后代...

p & ( p ! p ) {...};

即我想选择 p 类型的元素，但如果它们从 p 类型的其他元素下降则不会。

顺便说一句：我在 querySelector() 和 querySelectorAll() 中使用它，其中每个都是由属性而不是标签类型选择的，但我想展示一个可能的最简单的例子......

我试过这个没有成功（语法错误！）

p:not(p p) {......}

【问题讨论】：

标签： javascript css css-selectors

【解决方案1】：

你猜对了，这是不可能的。 :not(s) 指定 s 必须是一个简单的选择器。

您可以做的最接近的事情是将样式应用于所有p，然后为p p 覆盖它。

【讨论】：

【解决方案2】：

*:not(h1) p {
  ...
}

这叫做negation pseudo-class，你可以找到更多关于它的信息here。

顺便说一句，它是 CSS3，所以你不能在 8 之前的 IE 版本中使用它。

【讨论】：

对不起，我意识到我的解释不准确，不得不改变它！
那行不通。它的意思是“从不是 h1 的元素派生的 p 元素”。这并不意味着“不是来自 h1 的 p 元素”。由于*:not(h1) 将匹配<html>，并且由于每个<p> 都是<html> 的后代（包括也来自<h1> 的后代），它将匹配每个段落。
你是对的。无论如何，我还是把这个作为我的答案，以帮助那些不知道这个选择器的人。

【解决方案3】：

虽然:not(...) 选择器只有 CSS3，但我通常使用它来兼容 CSS2：

p { color: #abc; border: ... ; ... }
h1 > p { color: inherit; border: inherit; ... }

如果你的<p>s 有一个共同的祖先，即你的 html 看起来像这样：

<body>
    <p> ... </p>
    <p>
        <p> ... </p>
        <p> ... </p>
    </p>
</body>

你可以使用“direct-child”选择器：

body > p { ... }

或者，当然，用类似的东西重置所有属性：

p p { color: inherit; background: inherit; ... }

也可以..

【讨论】：

对不起，我意识到我的解释不准确，不得不改变它！