html - 用于单独的兄弟元素组的 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;
}

这将选择 h2 之后的所有 h3 您可以向 h2 添加一个特殊类并为该类选择相邻的 sibling 。沿着:

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 选择它