Question

有没有办法选择<h2>代码后面的所有标题（在我的示例<p>中）？

例如，我可以选择第二个和第三个h2，这样我可以放一些填充顶部吗？

<main>
  <h2>Sub heading 1</h2>
  <p>Body text</p>
  <p>More body text</p>
  <h2>Sub heading 2</h2>
  <p>Body text</p>
  <h2>Sub heading 3</h2>
  <p>Body text</p>
</main>

或者要转过来，选择<p>之前的<h2>标记？放一些填充底部？

谢谢

Answer 1

这只是将它变成黄色，但你可以根据需要设计它。

p + h2 { 
    background-color: yellow;
}

<h2>Sub heading 1</h2>
  <p>Body text</p>
  <p>More body text</p>
  <h2>Sub heading 2</h2>
  <p>Body text</p>

Answer 2

使用CSS Sibling选择器之一：

相邻兄弟组合器（+）将两个选择器分开，并且仅当第二个元素立即跟在第一个元素后才匹配第二个元素，并且两者都是同一个父元素的子元素{ {1}}。

element

一般兄弟组合器（〜）将两个选择器分开并仅在第二个元素跟随第一个元素（但不一定立即）时匹配第二个元素，并且两者都是子元素同一个父p + h2。

element

更新：我刚刚重新阅读你的问题。目前没有办法通过CSS选择器获得前一个兄弟或父母。但是我听到有传言说那些即将到来。

Answer 3

好吧，如果您尝试选择第二个和第三个h2，请使用通用兄弟（或相邻）选择器，然后使用nth-of-type：

p ~ h2:nth-of-type(n+2):nth-of-type(-n+3) {
  padding-bottom: 12px;
}

<main>
  <h2>Sub heading 1</h2>
  <p>Body text</p>
  <p>More body text</p>
  <h2>Sub heading 2</h2>
  <p>Body text</p>
  <h2>Sub heading 3</h2>
  <p>Body text</p>
</main>

Answer 4

您可以在h2

中添加id tag

<h2 id="myId">Sub heading 1</h2>

并在CSS文件中

#myId {
    //code
}

或与班级：

<h2 class="myClass">Sub heading 1</h2>

并在css文件中：

.myClass {
//code
}

Answer 5

你可以这样做。它选择h2之后的下一个元素，如果它是一个元素p，它将添加一些padding-top。

h2 + p {
  padding-top: 5px
}

选择<p>标记后的所有<h2>

5 个答案: