<div> <span>0<span> <a href="1.html">1</a> <a href="2.html">2</a> <a href="3.html">3</a> </div>これにこんなスタイルをあてます。
div a:nth-child(1) { color: red; } div a:nth-child(2) { color: orange; } div a:nth-child(3) { color: green; }
結果
すると結果は、aに対するnth-childを指定しているのにもかかわらず1.htmlのaタグがオレンジに、2.htmlのaタグが緑色に、3.htmlのaタグはスタイルが反映されないという結果になります。 spanタグが邪魔しているのです。See the Pen dqYRQb by yuji ogata (@ogaty) on CodePen.
つまり、 aタグで絞り込んだ2番目の色じゃなくて、 2番目のタグがaだったら色をつける、という動作なのですね。 nth-child(2)→aという判定っぽい。