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が typedivであるため、それらはすべてタイプ別の要素の同じシーケンスにあります。

<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. 3 番目ではなく2 番目の のみがdiv最初のルールの直後に続くことができます。これが、2 番目のルールが機能しない理由です。