css - CSS 选择器：为什么 `.classA + .classB:nth-of-type(3)` 不起作用？

Question

给定 HTML 这样的：

<div class="h2 colors">Title: Colors</div>
<div class="pair">Hello world</div>
<div class="pair">Hello world</div>
<div class="pair">Hello world</div>
<div class="pair">Hello world</div>

和 CSS 之类的

.h2 + .pair:nth-of-type(2) { color: red; } /* works */
.h2 + .pair:nth-of-type(3) { color: green; } /* doesn't */

为什么 type(3) 不起作用？

见小提琴

Answer 1

因为类型是指元素类型，而不是类。在您的情况下，由于div.h2和div.pair都是 type div，因此它们都按类型位于相同的元素序列中：

<div class="h2 colors">Title: Colors</div> <!-- div:nth-of-type(1) -->
<div class="pair">Hello world</div>        <!-- div:nth-of-type(2) -->
<div class="pair">Hello world</div>        <!-- div:nth-of-type(3) -->
<div class="pair">Hello world</div>        <!-- div:nth-of-type(4) -->
<div class="pair">Hello world</div>        <!-- div:nth-of-type(5) -->

相邻的兄弟组合器+只查看紧随其后的兄弟。如上图，div.h2这里是第一个div。只有第二个div，而不是第三个，可以立即跟随第一个，这就是你的第二个规则不起作用的原因。

Answer 2

正如@BoltClock 所说，您正在使用相邻的兄弟选择器..

而是将您的规则更改为

div.pair:nth-of-type(2) { color: red; background: #C0C0C0; }
div.pair:nth-of-type(3) { color: green; background: #E0E0E0; }

演示

这些选择器将选择具有“pair”类的第 n 个 div 元素