Question

我有一个看起来像这样的文件：

<h1>Title A</h1>
<h2>Sub 1</h2>
<h1 class='foo'>Title B</h1>
<h2>Sub 2</h2>
<h2>Sub 3</h2>
<h1>C</h1>
<h2>Sub 4</h2>

我想选择Sub 2和3，因为它们在Title B之后，是一个带有foo类的h1。但是，Sub 4并不感兴趣，因为之前的h1属于foo类。

我知道我可以在h1开头的每个块周围放置div，但我的内容是通过markdown生成的，所以唯一的方法是在页面加载后更改DOM，并且感觉很脏且很麻烦。

我的问题与此问题有点How to select all elements after specific element in CSS，但我缺少＆＃34;恢复正常＆＃34;一旦看到常规的h1就会出现这种行为。

Answer 1

http://jsfiddle.net/70zxd3h8/

.foo + h2, .foo + h2 + h2 {
    background:red;
}

或h2：nth-of-type（2），h2：nth-of-type（3）

Answer 2

您可以使用general sibling selector ~在<h2>之后选择<h1>类.foo，并再次使用它来“重置”下一个<h1>代码后的CSS属性：

.foo ~ h2 {
  color: red;
}
.foo ~ h1 ~ h2 {
  color: black;
}

<h1>Title A</h1>
<h2>Sub 1</h2>
<h1 class='foo'>Title B</h1>
<h2>Sub 2</h2>
<h2>Sub 3</h2>
<h2>Sub 4</h2>
<h2>Sub 5</h2>
<h1>C</h1>
<h2>Sub 6</h2>
<h2>Sub 7</h2>

此示例将更改.foo元素之后所有h2标记的颜色（这意味着您可以拥有任意数量的）并在下一个{之后将其重置为黑色{1}}标记。

css选择器：找到一个类型的最后一个兄弟

2 个答案: