如何使用 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>

这行得通。如第一个示例中使用纯 CSS 编写的那样，如何按类名获取第二个 div？

此外，: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