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

【问题标题】：Why isn't my a:hover:nth-child code working?为什么我的 a:hover:nth-child 代码不起作用？
【发布时间】：2013-11-29 01:06:23
【问题描述】：

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

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/

【问题讨论】：

标签： css hover css-selectors

【解决方案1】：

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

改用<li> 试试。

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

【讨论】：

【解决方案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; }

【讨论】：

【解决方案3】：

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

#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;
    }

【讨论】：