Nth Child for ul li a链接 [英] Nth Child for ul li a links

问题描述

我正在尝试为ul li a元素获得一种特殊的样式.这是代码:

I am trying to get a special styling for ul li a elements. Here's the code:

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

我希望第二个链接(两个)具有与其他两个链接(一个和三个)不同的样式(color).

I'd like the second link (Two) to have a different styling (color) than the other two (One and Three).

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

This is what I've been trying, but it does not seem to work:

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

有任何技巧可以使它正常工作吗?这是所有设置的小提琴:

Any tips for getting this to work? Here is a fiddle all set up:

http://jsfiddle.net/DSkfH/

谢谢！

推荐答案

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

:nth-child() selects elements from amongst their siblings, in this case the a elements have no siblings, so you'll need to employ the :nth-child() pseudo-class to the li instead:

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

JS Fiddle演示.

这篇关于Nth Child for ul li a链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！