全選 <h2> 跟隨 <p> 標簽

Question

有沒有辦法選擇<p>標記之后的所有標題（在我的示例中為<h2> ）？

例如，是否可以選擇第二個和第三個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>

或者要轉過來，選擇<h2>之前的<p>標記？ 要放在底部？

謝謝

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選擇器之一：

相鄰的同級組合器 （+）分隔兩個選擇器，並且僅在第二個元素緊隨第一個元素之后才與第二個元素匹配，並且兩者都是同一父element子element 。

p + h2

---

通用同級組合器 （〜）分隔兩個選擇器，並且僅在第二個元素跟在第一個元素之后（ 盡管不一定立即 ）匹配時才匹配第二個選擇器，並且兩者都是同一父element子element 。

p ~ h2

更新：我只是重新閱讀您的問題。 當前，無法通過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

您可以將id tag到h2

<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
}