css - 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;
}

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

score 5 · Accepted Answer

如前所述，CSS选择器不允许在其中使用组合器，因此确实是语法错误。:not()

在这种情况下，由于+组合器的工作方式，您应该能够简单地+ h2移出:not()并删除它h2之前的，如下所示：

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

如果h2将永远是第一个孩子（根据您的示例，它不应该是），并且您想要匹配它，您需要稍微扩展选择器：

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

然而，如果这两种方法中的任何一种都失败了，你总是可以使用好的 ol' override，正如 Joseph Silber 演示的那样。

score 3 · Accepted Answer

CSSnot伪选择器不允许使用复杂的选择器。你对此无能为力。

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

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

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

2 回答 2