使用 nth-child 时出错

Question

我有这个：

a {
    display:table;
}

a:hover {
    text-decoration:none;
}

a:first-child {
    color:#00FF00; /* green */
}

a:nth-child(3) {     
    color:#FF0000; /* red */
}

<a href="www.google.com">Google<a>
<a href="www.google.com">Google<a>
<a href="www.google.com">Google<a>

问题：为什么第二个 "Google" 是红色而不是第三个？这里发生了什么？

Answer 1

关闭锚标签

HTML

<a href="www.google.com">Google</a>
<a href="www.google.com">Google</a>
<a href="www.google.com">Google</a>

http://jsfiddle.net/vasanthanvas/z569bm6w/

Answer 2

关闭</a>

*{
    padding: 0;
    margin: 0;
}


a {

    display:block;
}
a:hover {

 text-decoration:none;

}

a:first-child {
 color:#00FF00;
}
a:nth-child(3) {     
 color:#FF0000;      
}

<a href="www.google.com">Google</a>
<a href="www.google.com">Google</a>
<a href="www.google.com">Google</a>

Answer 3

You can check this on : https://jsfiddle.net/4k5f03yq/

It can't find the nth-child. Because a tag not close.

使用 nth-child 时出错

Error using nth-child

html

css

styling