Я пытаюсь использовать 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 который не в том же <li>
JSFiddle Demo