CSS：not（）选择器指定前一个元素

Question

这是一个非常简单的问题，我无法理解。

我有一系列像这样的div：

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>Paragraph text</p>

<h2>Heading 3</h2>

<p>Paragraph text</p>

在CSS中，我可以使用h1+h2{}定位h1标记后面的h2标记，但是我似乎无法以这种方式使用:not()。例如，我想使用：

#text h2:not(h1+h2){
    margin-top:3em;
}

但这似乎不起作用。我是在做某种愚蠢的语法错误还是不可能这样做？

Answer 1

作为mentioned previously，CSS :not()选择器不允许在其中使用组合器，所以实际上，它是语法错误。

在这种情况下，由于+组合子的工作方式，应能够将+ h2移出:not()并删除在它之前h2，就像这样：

#text :not(h1) + h2 {
    margin-top: 3em;
}

如果h2将成为第一个孩子（考虑到你的样本，它不应该是），并且你想匹配它，你需要扩展选择器：

#text h2:first-child, #text :not(h1) + h2 {
    margin-top: 3em;
}

但是，如果不使用这两种方法中的任何一种，您总是可以使用好的'覆盖，as Joseph Silber demonstrates。

Answer 2

CSS not伪选择器不允许复杂的选择器。你无能为力。

要获得所需的功能，您必须覆盖它：

#text h2 {
    margin-top:3em;
}

#text h1 + h2 {
    margin-top: 0;
}