CSSに基づく一般的なセレクター

CSSの一般的に使用されるセレクター

今日は、いくつかの一般的で一般的に使用されるセレクターと、セレクターの分類を紹介し
ます
。1. 基本セレクター：1.要素セレクター
2.クラスセレクター
3. IDセレクター
4.ワイルドカードセレクター（*）：ドキュメント内のすべてを選択します要素
5.セレクター、セレクター、およびコレクターの組み合わせ（これも選択されています）（間隔を空けたセレクターを使用）**例：div、p、span {color ：red;} 一方、div、p、spanの要素コンテンツの色を設定します。
注：より具体的な場合は、組み合わせセレクターを個別に計算する必要があります

2.階層セレクター
1.子セレクターの
親要素>子要素{宣言ブロック}
2.子孫セレクターの
親要素子要素{宣言ブロック}
3.ブラザーセレクター（隣接する兄弟：2つの要素間には存在できません）任意のラベル）
兄弟要素A +兄弟要素B {宣言ブロック}（Bのみを選択できます）
4.ユニバーサルセレクター（非隣接兄弟）
兄弟要素A〜兄弟要素B {宣言ブロック}（すべての兄弟要素Bを選択）

3.疑似クラスセレクター（クラスセレクターを偽造）
1.:nth-child ( n）n番目の要素を選択
適用シナリオ：すべての兄弟要素が同じラベル名を持っている

：nth-​​child（2n）偶数アイテムを選択（even）：nth-​​child（2n + 1）奇数アイテムを選択（odd）（nは0から開始）
：nth-​​child（-n + 3）最初の3つを選択素子

2.:nth-of-type(n）n番目の要素を選択（同じタグ名のみを選択）
該当するシナリオ：兄弟要素のタグ名は異なる場合があります

3.:last-child最後の要素を選択
：first-child最初の要素を選択
：nth-​​last-child（n）n番目の最後の要素を選択

4.負の疑似クラスセレクタ
：not（：nth-​​child（n））n番目を除き、他のすべてが選択されます。
例：p：not（：nth-​​child（3））{} 3番目を除いて、その他すべてが選択されます
例：p：not（：nth-​​child（3））：not（：nth-​​child（4））{} 3番目と4番目を除いて、残りが選択されます

5動的疑似クラスセレクター
状態1：：link not Visited
状態2：：hover Hovering（mouse in）
状態3：：activeクリックされたとき
状態4：：visited訪問された
書き込み順序1：：link /：visited /：hover /：アクティブな
書き込み順序2：：visited /：link /：hover /：active
注：link / visitedはタグにのみ適用されます

6.focusフォーカスの取得
ラベルがアクティブになると、フォーカスフレームが取得されます

4.疑似要素セレクター（偽要素）
:: beforeは、現在の要素（最初の子要素）の前にコンテンツを追加しますh1 :: before {content： "content";}
:: afterは、現在の要素（最後の要素）の後にコンテンツを追加します子要素）h1 :: after {content： "content";}
疑似要素には、現在の要素との親子関係があります
:: first-line 現在の要素の最初の行h1 :: first-line {color：gold;}
:: first -letter現在の要素の最初の文字（漢字）h1 :: first-letter {color：gold;}

5.属性セレクター
1.記述形式：要素名[属性]属性：属性名= "属性値"
p [class = "box"] {color：red;}
2. 記述形式：要素名[名前^ = "部分的な属性値 "]はXXXで始まる属性値を意味します（順序）
p [name ^ =" f "] {color：blue;}
3.書き込み形式：要素名[name $=「部分部分属するプロパティ値」]表示さにX-X-X-の接合ビームの属プロパティ値（逆の順序）P[N-AME$ =「N- '] {色：青;}

CSSでスタイルを追加するときは、適切なセレクターを選択する必要があります。これにより、コードの量が削減されるだけでなく、コード構造が最適化されるだけでなく、後のメンテナンスにも便利になります。