2013-06-18 2 views
6

Мне кажется, что nth-of-type работает только в одном и том же родительском элементе. Есть ли способ заставить его работать на всей странице?CSS3 nth-of-type по всей странице?

Мое положение: Я хотел бы пережить пять цветов наведения для ссылок. Эти ссылки разбросаны по многим абзацам. Поскольку в параграфе имеется только одна или две ссылки, первая пара цветов наведения непропорционально предпочтительна.

Спасибо!

ответ

3

nth-of-type всегда смотрит на индекс элемента относительно его прямого родителя: (w3schools), поэтому он не будет работать на всей странице.

Лучше всего осуществить это поведение с JavaScript, вот быстрый демо с помощью JQuery: jsfiddle

var styles = ["first", "second", "third"]; 
var index = 0; 
$("body").find("a").each(function() { 
    $(this).addClass(styles[index++]); 
    if (index >= styles.length) index = 0; 
}); 
+0

Спасибо! Я подозревал, что это будет ответ, но я хотел проверить, прежде чем я отказался от CSS. :) – Joyce

Смежные вопросы