ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。