css - 我正在尝试使用 CSS 3's ' nth-of-type' 但无法正常工作？

Question

这是我正在尝试做的基本上的 jsfiddle。

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>的 :nth-of-type(2)

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

这将规则应用于第二个 <li> .你有这样的感觉:

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

使用它选择第二个 .mainPage这不在同一个<li>
JSFiddle Demo