ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSの最初の要素を取得する方法

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

藏色散人
リリース: 2020-11-30 10:35:35
オリジナル
6656 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート