css - ページ全体で CSS3 nth-of-type?

Question

nth-of-type は同じ親要素内でのみ機能するようです。ページ全体で機能させる方法はありますか?

私の状況: リンクに 5 つのホバー カラーを循環させたいと考えています。これらのリンクは多くの段落に散らばっています。段落ごとに 1 つまたは 2 つのリンクしかないため、最初の 2 つのホバー カラーが偏って優先されます。

ありがとう！

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