</p> <h3>标记之后选择所有<p>

Question

这个问题听起来很奇怪，因为一种简单的处理方法是将特定的类或ID添加到这些

中。但是我的html是由其他一些工具渲染的，因此我自己无法管理那些特定的<p>，但是我只想在<p>之后填充<h3>。这些<p>都是<section>（代码

的子代）

<h3>ipsum</h3>
<p>lorem</p>
<p>foo</p>

我尝试使用h3 + p选择器解决此问题，但它只能更改为第一个<p>。我想选择h3之后的所有p。

Answer 1

只需使用general sibling selector ~（而不是相邻兄弟选择器+）：

h3 ~ p {
  color: red;
}

<h3>ipsum</h3>
<p>lorem</p>
<p>foo</p>

Answer 2

  

+ ：+组合器选择相邻的同级。这意味着第二个元素直接跟随第一个元素，并且它们共享相同的父元素。

     

〜：〜​​组合器选择同级。这意味着第二个元素紧随第一个元素（尽管不一定紧随其后），并且都共享相同的父元素。

因此，使用~代替+

h3 ~ p {your code...}

h3 ~ p { background-color:yellow }

<h3>ipsum</h3>
<p>lorem</p>
<p>foo</p>

Answer 3

如果<p>元素是<section>的子元素，则可以将类添加到<section>并在CSS中执行.exampleClass p或section p < / p>