html - 选择 <p> 标签后的所有 <h2>

Question

有没有办法选择 <h2> 之后的所有标题(在我的示例中为 <p> )标签？

比如我可以选择第二个和第三个h2，这样我可以放一些padding-top吗？

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