CSS :not() 选择器指定前一个元素答案

【问题标题】：CSS :not() selector specifying previous elementCSS :not() 选择器指定前一个元素
【发布时间】：2013-01-14 12:53:32
【问题描述】：

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

我有一系列这样的 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;
}

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

【问题讨论】：

【解决方案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;
}

但是，如果这两种方法中的任何一种都失败了，您始终可以使用良好的 ol' 覆盖，as Joseph Silber demonstrates。

【讨论】：

【解决方案2】：

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

要获得你想要的功能，你必须重写它：

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

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

【讨论】：