nth-child не отвечает на класс [duplicate]

На этот вопрос уже есть ответ здесь:

• Могу ли я комбинировать: nth-child () или: nth-of-type () с произвольным селектором? 6 ответов

Можно ли заставить псевдоселектор nth-child () работать с определенным классом?

См. этот пример: http://jsfiddle.net/fZGvH/

Я хочу, чтобы второй DIV.red стал красным, но он не применяет цвет, как ожидалось.

Не только это, но и когда вы указываете это изменяет 5-й DIV на красный:

div.red:nth-child(6)

Когда вы указываете это, он меняет 8-й DIV на красный:

div.red:nth-child(9)

Кажется, на один DIV отстает. В этом примере всего 8 тегов DIV, поэтому я не знаю, почему nth-child (9) вообще работает. Тестирование с использованием Firefox 3.6, но в моем реальном производственном коде та же проблема возникает в Chrome. Я не понимаю, как это должно работать, хотел бы получить разъяснения.

Кроме того, это изменит 6-й DIV на красный, но на самом деле я хочу, чтобы он изменил второй DIV.red на красный:

div.red:nth-of-type(6)

И я не понимаю, почему nth-child () и nth-of-type () реагируют по-разному, поскольку в документе всего восемь тегов одного типа.