如何獲得使用CSS的兩個div類實例的第二個？

Question

如果我使用下面的代碼：

<style> 
.a:nth-child(2){ 
    color: blue 
} 
</style> 

<div class="a">Hello</div> 
<div class="b">Goodbye</div> 
<div class="a">Hello 2</div> 

與「A」，也不變爲藍色類名稱的第二個div的文本。

不過，如果我重新安排的div

<style> 
.a:nth-child(2){ 
    color: blue 
} 
</style> 

<div class="a">Hello</div> 
<div class="a">Hello 2</div> 
<div class="b">Goodbye</div> 

這工作。我怎麼會得到類名的第二個div，如第一個例子中使用純CSS寫的？

另外，nth-of-type（n）語法完全相同。

這裏有一個小提琴證明這一點：

http://jsfiddle.net/mrmayfield/r61pztpb/

Answer 1

您需要使用：

.a:nth-of-type(3){ 
    color: blue 
} 

或者：

.a:nth-child(3){ 
    color: blue 
} 

由於nth-of-type由元素的類型是去（在這種情況下爲div）和nth-child通過其父容器中的子編號。

更新fiddle