第N个孩子为ul li a链接

Question

我正在尝试为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>

我希望第二个链接（Two）与其他两个链接（One和Three）具有不同的样式（color）。

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

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

有什么技巧可以让它发挥作用吗？这是一把小提琴：

http://jsfiddle.net/DSkfH/

谢谢！

Answer 1

:nth-child()从其同级元素中选择元素，在这种情况下，a元素没有同级元素，因此您需要将:nth-child()伪类用于li：

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

JS Fiddle演示。

Answer 2

尝试

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

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

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

不能只使用li选择器，因为color属性不是由a标记继承的。

http://jsfiddle.net/DSkfH/3/