CSSセレクターで最初の要素を選択する方法

CSS セレクターで最初の要素を選択する方法: 1. 「first-child」セレクターを使用して、その親要素に属する最初の子要素を選択します。2. 「last-child」を使用して、リストの最後の要素 A ラベル; 3. 「nth-child(3)」を使用して 3 番目のラベルを選択します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS のセレクターを使用して選択される要素は何ですか?

セレクターを使用して CSS 内の要素を選択するにはどうすればよいですか?次の記事では、CSS セレクターを使用して最初の要素を選択する効果を実現する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

フロントエンド開発では、次のようなニーズに遭遇することがあります。リストの最初の部分に異なるスタイルを表示したい、リストの偶数部分に異なる背景色を表示したい、リストに異なる色を表示したい異なる背景色を表示する スタイルの最後の部分が異なります... この要件を達成するにはどうすればよいでしょうか?

実は、先ほどのファイルがPHPで開発されている場合は、PHPのループ文のcssスタイルを判断することで実現できます。ただし、静的コードの場合はPHPは使用できません。

現時点では、CSS を通じてこれを実現することもできます。CSS は、first-child、last-child、nth-child(n) などの非常に便利なスタイル パラメーターを提供します。以下で、その使用法を詳しく見てみましょう。

1. first-child

first-child セレクターは、親要素の最初の子要素に属する指定されたセレクターを選択するために使用されます。

li リストの最初の li モジュールの背景色を選択します。

li:first-child{background:#090}

2, last-child

last-child は選択リストの最後のタグを表します。コードは次のとおりです:

li:last-child{background:#090}

3, nth-child(3 )

は 3 番目のラベルを選択することを意味します。コードは次のとおりです。上記のコードの

li:nth-child(3){background:#090}

3 は、4、5 などの他の数値に変更することもできます。ラベルを選択したい場合は、番号を入力するだけです。

4, nth-child(2n)

これは、リスト内の偶数番号のタグ、つまり 2 番目、4 番目、6 番目... のタグを選択することを意味します。

5, nth-child(2n-1)

これは、リスト内の奇数のタグ、つまり 1 番目、3 番目、5 番目、7 番目... のタグを選択することを意味します。

6, nth-child(n 3)

これは、選択リスト内のタグが 3 番目から最後まで始まることを意味します。

7, nth-child(-n 3)

これは、選択リスト内のラベルが 0 ～ 3、つまり 3 未満のラベルであることを意味します。

8, nth-last-child(3)

これは、選択リストの最後から 3 番目のタグを表します。

推奨: 「css ビデオ チュートリアル 」

以上がCSSセレクターで最初の要素を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。