3

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

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

不能使用任何第 n 兄弟，因为标题之间的元素可能是数万亿。

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

4 回答 4

4

您可以使用一个鲜为人知的选择器，正式称为 Sibling 组合器（好吧，我认为这就是它的名字！）

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

#bap ~ p { color: red; }

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

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

看到这个小提琴

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

于 2012-09-12T12:16:41.237 回答
1 
h1#bap + p{color:red}​

这适用于第一个 p 标签。需要想办法申请所有的标签。这就是我现在得到的

于 2012-09-12T11:56:26.700 回答
1

我打算建议<div>在每个部分周围添加一些 s，直到我读到您说不应该添加其他标签的地方。

你不能只用 css 来做，但你可以使用一些 JavaScript 来实现这个算法：

  1. 循环浏览页面的所有元素。
  2. 当您看到 a 时<h1>，请记住它的 id。
  3. 对于 every <p>，给它一个对应于 last<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 {}
于 2012-09-12T12:05:34.990 回答
0

只能用javascript完成，如果你使用jquery，它看起来像

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

编辑：

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

这准确地解释了你想要做什么

编辑2：

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

于 2012-09-12T11:48:33.503 回答