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

Question

我需要 select 多个与 css 相邻的元素， + select 或者只有 select 一个，我该怎么做？

<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;
}

这将 select 所有 h3 跟随 h2 你可以添加一个特殊的 class 到 h2 和 select adjecent sibling for that class。沿着：

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;
}

甚至 select 它基于 :nth-child 如果你不想添加 classes

CSS selector for separate groups of sibling elements