ul li a链接的Nth Child问题

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）的样式（color）与其他两个（One和Three）不同。

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

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

有什么提示可以让这个工作？这里有一个已经准备好的fiddle：

http://jsfiddle.net/DSkfH/

谢谢！

- HelloWorld

Answer 1

:nth-child() 可以从同级元素中选择元素。在这种情况下，a 元素没有同级元素，所以你需要将 :nth-child() 伪类应用到 li 上：

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

JS Fiddle演示。

- David Thomas

---

非常感谢您抽出时间回复，它完美地解决了问题，同时也感谢您的解释 :) - HelloWorld

Answer 2

尝试

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

如果您希望li标签也有颜色，您还需要

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

您不能仅使用li选择器，因为颜色属性不会被a标签继承。

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

- Musa

---

非常感谢，我只是想把它放在 a 上，所以第一个例子完美地运行了。 - HelloWorld