CSS3:nth-child() 疑似クラス selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3:nth-child() 疑似クラス selector_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:56:40

オリジナル

1698 人が閲覧しました

CSS3 のパワーは驚くべきもので、人々は嬉しい驚きを感じていますが、その困難な道のりを残念に思っていることもあります。優れた標準は、業界のブラウザで十分にサポートされている場合にのみ「標準」とみなされます。 CSS3 標準は数年前から提案されていますが、現時点ではこれを実装できるブラウザは多くありません。一部の仕様は実装できますが、どのような用途に使用できるのでしょうか。さらに互換性の問題に直面すると、CSS 担当者は絶望してため息をつくことしかできません。それでも、前向きな私たちがどうして前に進むことをやめてしまうのでしょうか？今日は、CSS3 疑似クラスセレクター 「:nth-child()」 を「プレビュー」します。

文法:

:nth-child(an+b)

ログイン後にコピー

なぜ彼女を選んだかというと、このセレクターが最も知識があると思うからです。残念ながら、私のテストによると、現在彼女を適切にサポートできるのは Opera9+ と Safari3+ だけです。開発効率を500％向上させるフロントエンドUIフレームワーク！

説明:

疑似クラス :nth-child() のパラメータは、w3.org の説明に従って中国語で書かれていると、めまいがするかもしれません。書き方私のレベルには限界があるので、an+bという表現を避け、5つの書き方、計5回に分けて解説することにしました。

1 番目の方法: 単純な数値の書き方

:nth-child(number)

Number 番目の要素と直接一致します。パラメータ番号は 0 より大きい整数である必要があります。

例:

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

ログイン後にコピー

2 番目の方法: 複数の書き込み

:nth-child(an)

a の倍数であるすべての要素と一致します。パラメータanの文字nは、3n、5nなどの複数記述の記号です。

例:

li:nth-child(3n){background:orange;}/*3 番目、6 番目、9 番目、...、3 LI のすべての倍数の背景をオレンジ色に設定します*/

3 番目のタイプ: 複数のグループのマッチング

:nth-child(an+b) および :nth-child(an-b)

最初に要素をグループ化します。各グループには a があり、b はグループのメンバーです文字 n と正符号 + をデフォルトにすることはできず、位置を交換できないシーケンス番号は、この記述方法の特徴であり、a と b は両方とも正の整数または 0 です。 3n+1、5n+1 など。ただし、プラス記号は、グループ内の a-b 番目のものと一致するマイナス記号に変更できます。 (実際には、an の前にマイナス記号を付けることもできますが、それは次の部分に譲ります。) 開発効率を 500% 向上させるフロントエンド UI フレームワーク!

例:

li:nth-child(3n+1){background:orange;}/*1 番目の LI のグループ内の 1 番目、4 番目、7 番目、...、3 番目ごとの LI と一致*/

li :nth-child(3n+5){background:orange;}/*3 つのグループの 5 番目から始まる 5、8、11、...、最初の LI と一致します*/

li:nth- child(5n-1){background:orange;}/*5 番目の 1=4、10 番目の 1=9、...、5 番目の倍数から 1 を引いたものと一致します LI*/

li: nth-child (3n±0){background:orange;}/*(3n) に相当*/

li:nth-child(±0n+3){background:orange;}/*(3) に相当* /

4 番目のタイプ: 複数グループの逆マッチング

:nth-child(-an+b)

ここで 1 つの否定と 1 つの肯定をデフォルトにすることはできません。そうでない場合は意味がありません。これは :nth-child(an+1) に似ており、どちらも最初のものと一致しますが、違いは、b 番目の子から開始して逆方向にカウントするため、一致できるのは最大でも 1 つだけであることです。 b 以下であること。

例:

li:nth-child(-3n+8){background:orange;}/*8 番目、5 番目、2 番目の LI と一致*/

li:nth-child(-1n+8 ){background :orange;}/* または (-n+8)、最初の 8 つ (8 番目を含む) の LI に一致します。これはより実用的で、最初の N 個の一致を制限するためによく使用されます。 */ は 500% 改善できます。 -開発効率を高めるUIフレームワーク終了！