css - CSS：类中的相邻兄弟

Question

试图为相邻兄弟添加上边距。

<div class="container">
  <h2>Header 1</h2>
  <p>Some text and sentences...</p>
  <h2>Header 2</h2>
  <p>Some more text and sentences..</p>
</div>

通常我会通过在相邻兄弟姐妹上使用 css 来完成“标题 2”的上边距。

p + h2{
  margin-top: 12px;
}

但是，h2 的边距定义为

.container h2{
  margin: 24px 0px;
}

如何在覆盖 .container h2 css 时使相邻的兄弟 css 工作？

score 3 · Accepted Answer

尝试以下操作：

.container > p + h2{
  margin: 12px;
}

那是：

由于.container > p + h2包含 1 个类和 2 个元素，它将覆盖.container h2只有 1 个类和 1 个元素。

score 2 · Accepted Answer

2

这应该工作

.container p + h2 {
margin-top: 12px;
}

于 2014-04-15T18:24:55.877 回答

score 1 · Accepted Answer

.container h2比p + h2考虑更具体。您需要一个更具体的选择器来覆盖边距。

这应该是“更具体”并覆盖：

.container p + h2 {
    margin-top: 12px;
}

3 回答 3