CSSの最初の要素を取得する方法

CSS で最初の要素を取得する方法: 1. "nth-child(3)" メソッドを通じてリストの 3 番目のタグを取得します; 2. "nth-child(2n)" を通じてリストを取得します" メソッド リスト内の偶数ラベル; 3. "nth-child(2n-1)" メソッドなどを通じてリスト内の奇数ラベルを取得します。

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

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

CSS はラベル要素を選択します: nth-child(n)、first-child、last-child

前書き: 今日のコーディング時に遭遇する要件は、最初の 2 つのタグ要素を選択し、データをチェックして記録することです~

nth-child (n)、first-child、last-子の使用法

注: nth-child(n) セレクターは、親要素内の n 番目の子要素と一致します。

n には、数値、キーワード、または数式を指定できます。

nth-child(n) の使用法:

1、nth-child(3)

は選択リストの 3 番目のラベルを表します。コードは次のとおりです。 ##

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

2, nth-child(2n)

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

li:nth-child(2n){background:#fff}

3. nth-child(2n-1)

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

li:nth-child(2n-1){background:#fff}

4. nth-child(n 3)

は、選択リストのタグが 3 番目から最後まで始まることを意味します。コードは次のとおりです。 ##

li:nth-child(n+3){background:#fff}

5.nth-child(-n 3)

は、選択リスト内のタグが 0 ～ 3、つまり 3 未満のタグであることを意味します。コードは次のとおりです。

li:nth-child(-n+3){background:#fff}

6, nth-last-child(3)

は、リストの最後から 3 番目のタグを選択することを意味します。コードは次のとおりです。

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

first -child の使用法:

1、first-child

first-child は、選択リストの最初のラベルを示します。コードは次のとおりです。

li:first-child{background:#fff}

last-child 使用法:

1, last-child

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

li:last-child{background:#fff}

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