CSS疑似クラスnth-child()の例の詳細説明

この記事では、CSS 疑似クラス nth-child() の例について詳しく説明し、nth-child() 疑似クラスで何ができるかを誰もが理解できるようにします。困っている友人は参考にしていただければ幸いです。

CSS3 の nth-child() 擬似クラスは、HTML で書式設定された Excel スタイルシートを作成する場合に非常に便利です。テーブルに頼らずにグリッド レイアウトを生成するためにも使用されます。

まず、nth-child() 疑似クラスについて学びましょう。 [推奨関連ビデオチュートリアル: css チュートリアル、css3 チュートリアル! ]

nth-child() 疑似クラスの基本ルール:

使用する構文は次のとおりです: nth-child (a n b)ここで、a は周波数、b は初期オフセットです。これにより、n = 0 から始まる無限系列が生成されますが、正の値のみが含まれます。

いくつかの例でこれを明確にできるかもしれません:

2n, 2n 0
2,4,6,8,10,12....

2n 1 または奇数
1,3,5,7,9,11....

2n 2
2、4、6、8、10、12....

2n 3
3,5,7,9,11,12....

2n 4
4,6,8,10,12,14....

3n、3n 0 または 3n 3
3,6,9,12,15,18....

3n 1
1,4,7,10,13,16…

したがって、系列は b で始まり、値ごとに a ずつ増加することがわかります。ゼロまたは負の結果をスキップすると、DOM ツリーを後方に見ることができなくなります。

nth-child() 擬似クラスの例:

次に、nth-child() 擬似クラスを見てみましょう。例を通して 関数:

例 1: hover で使用

#この例では、n 番目の子疑似クラスと ~ 一般兄弟セレクターを使用します。

最初に、単純に複数の div コンテナを左側にフローティングし、nth-child を使用して 10 個のボックスごとに新しい行を開始することでグリッドを作成します。

#stage div {
    float: left;
    margin: 5px;
    width: 60px;
    height: 50px;
    background: #efefef;
}
#stage div:hover { background: red; }
#stage div:nth-child(10n+1) { clear: left; }

HTML では、次の ID を追加しました。各 div コンテナー (#div1、#div2、...、#div100) に、次のようなホバー イベントを割り当てます。

#div1:hover ~ div:nth-child(1n) {
   background: yellow; 
}
#div2:hover ~ div:nth-child(2n) {
   background: yellow; 
}
#div3:hover ~ div:nth-child(3n) {
   background: yellow; 
}
#div4:hover ~ div:nth-child(4n) {
   background: yellow; 
}
...

これは、カーソルが div 上にあるとき、この div の n 番目の兄弟ごとに、黄色に変わります。たとえば、数字の 3 (#div3) の上にマウスを置くと、数字が赤に変わり、3 の倍数であるすべての div が黄色に変わります。試して、効果を見てみましょう:

例 2: nth-child を使用してテーブルをフォーマットします

CSS で詳細を確認します。典型的な例は、HTML テーブルをよりプロフェッショナルに見せるためにフォーマットする方法です。例: 列または行の色を交互に変える:

あまりきれいではありませんが、マークアップは非常にシンプルで、簡単に色を変更できます。 「タータンチェック」テーブル効果には、ある程度のアルファ透明度を持つ背景色を使用するため、列 (赤) と行 (青) の色が交わると、3 番目の色 (紫) が生成されます。

この例では、テーブル table のクラス値は「tartan」です:

.tartan tr:nth-child(odd) {
    background: rgba(0,0,255,0.5);
}
.tartan td:nth-child(even) {
    background: rgba(255,0,0,0.5);
}

透明な背景なしで他の色を指定できるように、交差するセルを直接配置したい場合は、使用法:

.tartan tr:nth-child(odd) td:nth-child(even) {
    background: #fff;
}

これは、テーブルのすべての奇数行の奇数セルと偶数行の偶数セルに対するものです。効果を見てみましょう:

上記のスタイルでは、覚えやすい奇数と偶数の省略方法を使用していることに注意してください。

要約: 上記は、この記事での nth-child() 擬似クラスの使用法全体の概要です。nth-child() 擬似クラスを自分で使用して、効果を実現し、理解を深めることができます。皆さんがヘルプを学ぶのに役立つことを願っています。

以上がCSS疑似クラスnth-child()の例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。