html - 在所选标题之间应用 CSS 样式

Question

我想选择 h1 标签之间的元素。例如，我想对 h1#bap 和下一个 h1 之间的所有 p 应用一种样式，同时不更改任何其他地方的样式。

不应添加其他标签(否则，太容易了:))。

不能使用任何第 nth-sibiling，因为 header 之间的元素可能有数万亿。

显然，我可能还想在其他标题之间应用样式(在特定的 h2 之间，...)。

<h1 id="bap">bap</h1>
  <p>foo bap</p>
  <p>foo bap 1</p>
  <p>foo bap 2</p>
  <p>foo bap 3</p>
  <p>foo bap 4</p>
  <div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
  <p>balibom</>p

Answer 1

您可以使用一个鲜为人知的选择器，正式名称为 Sibling 组合器(好吧，我想这就是它的名字!)

使用此语法，您可以选择 <h1 id="bap">bap</h1> 之后的所有 p 元素:

#bap ~ p { color: red; }

不幸的是，这选择了<h1 id="random-bor">random bor</h1> 之后的所有段落元素。也一样，但这可以通过重置这些段落元素的样式来克服，如下所示:

#random-bor ~ p { color: black; }

参见 this fiddle

这适用于所有现代浏览器，不幸的是它不适用于 IE6，如果这是一个问题，那么 jQuery 解决方案可能是最好的。