CSS 选择器 : why `.classA + .classB:nth-of-type(3)` not working?

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) 不起作用？

参见 Fiddle

Answer 1

因为类型是指元素类型，而不是类。在您的情况下，由于 div.h2 和 div.pair 都是 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，而不是第三个，可以紧跟在第一个之后，这就是为什么你的第二个规则不起作用。