使用CSS定位h2后面的所有p元素

Question

如何定位标题后面的所有p元素，例如....

<h2 class = 'history'>History</h2>
<p>this is paragraph 1</p>
<p>this is paragraph 2</p>
<p>this is paragraph 3</p>

<h2 class = 'present'>Present</h2>
<p>I don't want to target this paragraph</p>
<p>I don't want to target this paragraph</p>
<p>I don't want to target this paragraph</p>

使用.history + p我可以定位第1段，但是如何定位其他段落，直到我到达'Present'H2标签？

Answer 1

如果没有任何其他p元素，您可以使用~代替+：

.history ~ p

如果您的第二个p后面还有h2个元素，而您只想选择h2.history和h2.present之间的元素，我不认为它可以用当前的CSS选择器。一般的兄弟选择器~匹配 p 之后的每个h2兄弟，无论其中是否还有其他兄弟姐妹。

也就是说，您可以使用jQuery轻松完成它：

$('.history').nextUntil('.present')