役に立つ:nth-child秘方

原文:Useful:nth-child Recipies
日文:役立つ:nth-child秘方
著作権を尊重して、転載して出所を明記してください、ありがとうございます!
私が完璧に使いたいとき:nth-childあるいは:nth-of-typeは少しめまいがします.それらを理解すればするほど、良いCSSルールを書くことができます!
これらの簡単な「レシピ」(実際には式)では、簡単なリストを繰り返し使用し、数字を選択します.しかし、類似のセレクタを得るためにそれらを変更することは明らかである.

5番目の要素のみ選択

1
2
3

li:nth-child(5){
	color: green;
}

最初の要素を選択するには、first-childを使用するか、上記の例を変更して実現できると信じています.

前の5つ以外のすべての要素を選択

li:nth-child(n+6){
	color: green;
}

10以上の要素がある場合は、5以上が選択されます.

前の5つだけ選択

1
2
3

li:nth-child(-n+5){
	color: green;
}

最初から4番目を選びます

1
2
3
4

li:nth-child(4n-7) {
	/* or 4n+1 */
	color: green;
}

奇数または偶数を選択

1
2
3

li:nth-child(odd){
	color: green;
}

1
2
3

li:nth-child(even){
	color: green;
}

もちろんここにも2つの実現があります.あなたは知っています.神飛

最後の要素を選択

1
2
3

li:last-child {
	color: green;
}

最後から2番目を選択

1
2
3

li:nth-last-child(2){
	color: green;
}

この例から,上記の例にも第2の実現方法があることがわかる.

ブラウザのサポート

興味深いことに、first-childと:last-childはIE 7にサポートされていますが、IE 9が残りのセレクタをサポートしていることを知っています.IEが心配ならSelectivizrを使ってもいいです.ブラウザの互換性が重要な場合は、When can I useに注目してください.
ええと、CSS 3セレクタを使うのは面白いことで、簡単な数学の問題をするようです.
CSS 3セレクタの詳細については、「アドバンスドCSSセレクタの征服」を参照してください.