CSS選擇器：爲什麼`.classA + .classB：nth-​​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 */ 

爲什麼類型（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) --> 

相鄰的兄弟Combinator的+只着眼於來自緊鄰的兄弟。如上所示，div.h2這裏是第一個div。只有第二個div，而不是第三個，可以立即跟隨第一個，這就是爲什麼你的第二個規則不起作用。

Answer 2

As @BoltClock said，您使用的是相鄰兄弟選擇..

而是您的規則更改爲

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

Demo

這些選擇將選擇具有一類 '對' 的第n個div元素