css - 为什么我的 a:hover:nth-child 代码不起作用？

Question

这个简单的代码不起作用：

HTML：

<div id="topnav">
    <ul>
        <li><a href="a.html">Aaaaaaa</a></li>
        <li><a href="b.html">Bbbbbbbb</a></li>
        <li><a href="c.html">Ccccccccc</a></li>
    </ul>
</div>

CSS：

#topnav li a:hover:first-child{
    color:#ff0000;
    }

#topnav li a:nth-child(2):hover{
    color:#FF7700;
}

#topnav li a:nth-child(3):hover{
    color:#FFFF00;
}

每个链接应该有不同的悬停颜色。它们都显示为红色。为什么？

JSFiddle：http: //jsfiddle.net/jeZHD/

Answer 1

<a>因为每个父元素只有一个。这意味着，every<a>是其 parent 的第一个孩子<li>。

试试吧<li>。

工作示例：http: //jsfiddle.net/jeZHD/2/

Answer 2

这里：

#topnav li:nth-child(1) a:hover { color:#ff0000; }
#topnav li:nth-child(2) a:hover { color:#FF7700; }
#topnav li:nth-child(3) a:hover { color:#FFFF00; }

Answer 3

在这上面浪费了这么多时间之后，我才意识到第 n 个孩子应该在li's 上，而不是a's 上。像这样：

#topnav li:first-child a:hover{
    color:#ff0000;
    }

#topnav li:nth-child(2) a:hover{
    color:#FF7700;
    }

    #topnav li:nth-child(3) a:hover{
    color:#FFFF00;
    }