CSS3 nth-of-type across the entire page?

问题

It seems to me that nth-of-type only works within the same parent element. Is there any way to get it work across the whole page?

My situation: I would like to cycle through five hover colors for links. These links are scattered across many paragraphs. Since there are only one or two links per paragraph, the first couple of hover colors are disproportionately favored.

Thanks!

回答1:

nth-of-type always looks at the element's index relative to it's direct parent: (w3schools), so it won't work across the whole page.

Your best bet is to implement this behaviour with javascript, here's a quick demo using 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;
});

来源：https://stackoverflow.com/questions/17159644/css3-nth-of-type-across-the-entire-page