ul li a 链接的第 N 个孩子答案

【问题标题】：Nth Child for ul li a linksul li a 链接的第 N 个孩子
【发布时间】：2013-07-30 02:58:13
【问题描述】：

我正在尝试为 ul li a 元素设置特殊样式。代码如下：

<ul id="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>

我希望第二个链接（二）的样式（color）与其他两个（一和三）不同。

这是我一直在尝试的，但它似乎不起作用：

#menu li a:nth-child(even) {color:red;}

有什么技巧可以让它发挥作用吗？这是所有设置的小提琴：

谢谢！

【问题讨论】：

【解决方案1】：

:nth-child() 从它们的兄弟元素中选择元素，在这种情况下 a 元素没有兄弟元素，因此您需要使用 :nth-child() 伪类来代替 li：

#menu li:nth-child(even) a {color:red;}

【讨论】：

【解决方案2】：

试试

#menu li:nth-child(even) a {color:red;}

如果你也想要 li 上的颜色，你也需要

#menu li:nth-child(even) {color:red;}

您不能只使用li 选择器，因为a 标记没有继承颜色属性。

【讨论】：