选择 <h3> 标签后的所有 <p> [重复]答案

【问题标题】：Select all <p> after <h3> tag [duplicate]选择 <h3> 标签后的所有 <p> [重复]
【发布时间】：2018-12-11 10:58:50
【问题描述】：

这个问题可能听起来很奇怪，因为处理它的简单方法就是为那些添加特定的类或 id

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

h3 ~ p {
  color: red;
}

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

【讨论】：

【解决方案2】：

+ ：+ 组合器选择相邻的兄弟姐妹。这意味着第二个元素直接跟在第一个元素之后，并且都共享同一个父元素。

~ : ~ 组合器选择兄弟姐妹。这意味着第二个元素在第一个元素之后（尽管不一定立即），并且都共享同一个父元素。

所以，请使用~ 而不是+

h3 ~ p {your code...}

h3 ~ p { background-color:yellow }

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

【讨论】：