用于单独的兄弟元素组的CSS选择器

Question

我需要用css选择多个相邻的元素， + 选择器只选择一个，我该怎么做？

<h2 class="title">Bat</h2>
<h3>Black</h3>
<h3>Cool</h3>
<h2 class="title">Crow</h2>
<h3>Smart</h3>
<h3>Player</h3>

就像上面这个例子中一样，我想以不同的方式设置Bat h3s和Crow h3s的样式。

Answer 1

您可以使用代字号：

h2 ~ h3 {
 color:blue;
}

这将选择h3之后的所有h2，您可以向h2添加一个特殊类，并为该类选择adjecent同级。沿着：

HTML：

<h2 class="title bat">Bat</h2>
<h3>Black</h3>
<h3>Cool</h3>
<h2 class="title crow">Crow</h2>
<h3>Smart</h3>
<h3>Player</h3>

CSS：

h2.bat ~ h3 {
 color:blue;
}
h2.crow ~ h3 {
  color:red;
}

如果您不想添加类

，甚至可以根据:nth-child选择它