整个页面的 CSS3 第 nth-of-type？

Question

在我看来，nth-of-type 只能在同一个父元素中起作用。有什么方法可以让它在整个页面上工作吗？

我的情况:我想循环显示链接的五种悬停颜色。这些链接分散在许多段落中。由于每个段落只有一个或两个链接，因此前几个悬停颜色受到不成比例的青睐。

谢谢!

Answer 1

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;
});