CSS：“AND”和+运算符？答案

【问题标题】：CSS: "AND" and + operator?CSS：“AND”和+运算符？
【发布时间】：2012-04-04 14:51:28
【问题描述】：

我想在所有使用 CSS 的标题之后放置一个空格。像这样：

如果 h1 = 在后面添加一个空格
else if h1 + h2 = 在also 后面加一个空格但中间没有空格

这是我的 HTML 代码

<article>
     <h1>Title 1</h1>
...
</article>
<article>
     <h1>Title 1</h1>
     <h2>Title 2</h2>
...
</article>

对于 CSS

h1, h2 { padding-bottom: 20px; }

问题是，h1 和 h2 之间也有一个空格。我在下面尝试了这段代码，但只有那些带有 h1 和 h2 的文章后面有空格。

h1 + h2 { padding-bottom: 20px;}

有没有办法做到这一点？或者我应该只在 CSS 中使用 h1 + h2 并为 h1 添加
？

【问题讨论】：

这个链接帮助了我：stackoverflow.com/questions/2797091/css-and-and-or

标签： css operators

【解决方案1】：

有几种方法可以做到这一点，没有一个漂亮。

/* #1 */
h1 + *:not(h2),
h2 + *:not(h3) { /* etc */
    padding-top: 20px;
}

/* #2 */
h1, h2 {
    padding-bottom: 20px;
}
h1 + h2 {
    margin-top: -20px;
}

（以及这些的变体。）

问题是目前无法选择“向后”，即根据元素之后出现的内容将样式应用于元素。只能使用+ 或~ sibling combinators 选择“转发”。因此，您不能基于后续<h2> 的存在来覆盖<h1> 上的样式。

在 CSS4 选择器草案中，有一种指定选择器主题的方法，using the $ sign。在这种情况下，代码如下所示：

h1, h2 {
    padding-bottom: 20px;
}
$h1 + h2 {
    padding-bottom: 0;
}

/* or even */
h1:not($h1 + h2), h2 {
    padding-bottom: 20px;
}

不过，这目前在任何浏览器中都不可用。

【讨论】：

给我一个想法。我两个都用过。 h1 + *:not(h2) { padding-top: 20px;} h1 + h2 { padding-bottom: 20px;}
哦，对了，我忘了在#1 中的<h2> 后面加上空格。已添加。

【解决方案2】：

如果 h2 跟随 h1，有没有办法知道何时生成 HTML？这似乎是处理这个问题的最好方法。然后，您可以为 h2.follows_h1 { margin-top: -5px } 或任何适合您需要的内容创建一个简单的 css 规则。

【讨论】：