我正在尝试使用CSS3的'nth-of-type'但是无法让它工作？

Question

这是我基本上想要做的事情.

http://jsfiddle.net/miiicheellee/aHwS8/151/

HTML:

<ul id="Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer">
<li><a href="" class="mainPage">1</a></div>
<li><a href="" class="mainPage">2</a></div>
<li><a href="" class="mainPage">3</a></div>
</ul>

CSS:

.mainPage:nth-of-type(2) a{
 background: red;
}

<!-- how would I get this to work if the list items do NOT have an identification? --!>

问题是我无法使用列表项的标识,因为我的网站上有ul和li的复杂嵌套,虽然我知道这样可行.有没有其他方法可以使用我在jsfiddle上的方法来做到这一点？换句话说,请不要操纵HTML - 遗憾的是,我无法控制ID和类名.

Answer 1

你需要把它应用到<li>'s:nth-of-type(2)

li:nth-of-type(2) a{
 background: red;
}

这将规则应用于第二个<li>.你有它喜欢:

.mainPage:nth-of-type(2) a{
 background: red;
}

使用它,它选择.mainPage不在同一个JSFiddle演示中的第二个<li>