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

正如前面所提到的,在CSS :not()选择器不允许在它里面组合子,所以的确,这是一个语法错误.

在这种情况下,由于方式的+组合子的工作,你应该能够简单地移动+ h2了的:not(),并删除h2之前,就像这样:

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

如果h2永远是第一个孩子(给定你的样本,它不应该是),并且你想匹配它,你需要扩展选择器:

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

然而,如果没有这两种方法中的任何一种,你总是可以使用好的'覆盖',正如Joseph Silber所说.