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

Question

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

不能添加其他标签（否则就太容易了：））。

由于标题之间的元素可能有数万个，因此无法使用任何nth-sibiling。

显然，我也可能希望在其他标题之间应用样式（在特定的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

- Cedric

---

如果您的网页上有数万亿个元素，那么问题就更大了 :) - BoltClock

你能否澄清一下你想选择什么？也许你可以在代码中要选择的元素内加上注释。 - starbeamrainbowlabs

Sternbeanrainbowlabs，下次我在网上提问时会考虑这个建议！我会添加注释或更好的显示方式。目前，您可以在被接受的答案中查看结果。 - Cedric

Answer 1

您可以使用一种较少使用的选择器，称为兄弟组合器（至少我认为它是这个名字！）

使用此语法，您可以选择

bap

之后的所有p元素：

#bap ~ p { color: red; }

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

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

请查看这个示例

这个在所有现代浏览器中都可以运行，但是不幸的是在IE6中不能正常工作。如果这是一个问题，那么使用jQuery解决方案可能是最好的选择。

- Sean

---

它被称为通用兄弟组合器（或后续兄弟组合器）。有两个兄弟组合器；另一个是相邻（或下一个兄弟）组合器+。 - BoltClock

没问题，我发现演示也有助于解释/说明 :) - Sean

Answer 2

h1#bap + p{color:red}​

这适用于第一个p标签。需要找到适用于所有标签的方法。目前就是这样。

- Sowmya

Answer 3

我本来想建议在每个部分周围添加一些 <div>，直到我看到你说不应该添加其他标签的那一部分。

仅使用 CSS 是无法实现的，但是您可以使用一些 JavaScript 来实现此算法：

1. 循环遍历页面上的所有元素。
2. 当您看到一个 <h1> 时，请记住它的 id。
3. 对于每个 <p>，给它一个与最后一个 <h1> 的 id 相对应的类。

您应该会得到像这样的东西，您应该能够轻松地使用 CSS 进行样式设置。

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

然后您可以像这样设置样式：

p.bap {}
p.random-bor {}

- Luke Mills

Answer 4

只能使用JavaScript完成，如果您正在使用jQuery，则会像这样

$('h1#bap').nextUntil("h1#random-bor",'p').css('background','red');

编辑：

如何在jQuery中选择两个标签之间的所有内容

这解释了您想要完成的内容

编辑2：

还有一个jQuery函数http://api.jquery.com/nextUntil/

- Breezer

---

是的，只能使用jQuery完成，但这只是h1 ~ p，所以不正确。 - BoltClock

jQuery在大量元素上会明显变慢吗？ - starbeamrainbowlabs

@starbeamrainbowlabs，我测试了jQuery的nextUntil方法，实际上它对性能没有任何影响。 - Breezer

@starbeamrainbowlabs：在大量元素上，任何东西都会变慢。 - BoltClock

@BoltClock 非常正确。如果能找到解决方案，CSS 不会比 jQuery 快得多吗？ - starbeamrainbowlabs

@starbeamrainbowlabs：是的，CSS通常比jQuery更快地实现样式。 - BoltClock