css - CSS样式标题和以下内容

Question

以下非常基本的问题样式内容与标题。我有以下情况：通常内容的结构如下：

<h1>Main Header</h1>
<h2>Sub Header</h2>
<p>Content</p>

但在某些情况下，子标题不存在。当内容直接跟随而没有子标题时，我想在主标题和内容之间添加不同的填充/边距。

我觉得必须有一个我正在监督的简单解决方案。

Answer 1

使用相邻的兄弟选择器：

h1 + p {
    /* ... */
}

这只是选择<p/>if 它直接在<h1/>.

Answer 2

失去margin-bottoms 并使用margin-tops 代替。

这种方式margin-top: 15px将<p>提供 15px 的空间，无论其上方是什么。

Answer 3

h1 + p {
  margin-top: ...;
}

那只会选择 p 前面有 h1

Answer 4

overflow:hidden您可以为此尝试属性。