CSS3:n番目の子()セレクタ
定義と使用法
:親要素のn番目の要素にマッチするN番目の子(n)を選択。
nが数、キーワード、または式とすることができます。
ヒント:参照してくださいセレクタを 。セレクタは、n番目の兄弟兄弟の同じタイプと一致します。
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
选择器 | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
より多くの例
例1
<P奇数と偶数に使用されるサブ要素にマッチするキーワードとして使用することができ、そのインデックスが奇数か偶数である(最初の子のインデックスは1です)。 ここでは、奇数と偶数のp要素のための2つの異なる背景色を指定します。
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
»をお試しください
例2
式(+ b)は説明の使用:サイクルの代表的なサイズは、N(0から始まる)カウンタであり、Bはオフセットされています。 ここではすべてのインデックスが3 p要素の倍数である背景色を指定します。
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
»をお試しください