CSS セレクターの学習: 複合セレクターについて話しましょう (詳細な紹介)

この記事では、CSS の複合セレクターについて詳しく説明し、CSS の交差セレクター、結合複合セレクター、階層セレクター、疑似クラスおよび疑似要素セレクター、および属性セレクターについて学びます。 ！

#1. 交差セレクター

##ラベル固有セレクターとも呼ばれます

• #機能: 同時に 2 つのタグに一致するコンテンツを選択します

• ##形式: 1.

  2 つの
セレクターで構成され、最初のセレクターは 1 つですはラベル セレクター、2 番目はクラス セレクターまたは ID セレクターです。2. 2 つのセレクターの間にスペースを入れることはできません。

• 例: Teacherクラスの生徒全員に髪を赤く染めるよう要求します。

• div.student{
  				color: red;
  }

  ログイン後にコピー
  2. ユニオン複合セレクター

関数: 定義します。選択したすべてのセレクターに同じスタイル

• #形式: 各セレクターは

  カンマで接続されます

• ##注: どのセレクターでも結合セレクターの一部として使用できます (許容範囲が大きくなります)
  例: 校長は学校のスローガンを要求し、すべての教師は郭越が将来のみ書くことができます。「宋王朝を書く」

• p.slogn,.teacher,#gy{
  				font-family: "宋体";
  }

  ログイン後にコピー

#3. 階層セレクター

関数: 要素の子孫を選択します

• 例: Yu Gong の子孫が集団で髪を染めたいと考えています

• #yuGong .people{
     			color: red;
     		}

  ログイン後にコピー

• 注: 現時点ではユゴン 子孫の中では

  ユゴンの息子、孫、ひ孫も含めて、人々の子孫全員が

  髪を染めます...

• # #2. サブ要素 複合セレクター

関数: 要素の子 (子) である要素を選択します形式: 親レベルのタグが前に書かれ、サブレベルのタグが後ろに書かれ、>

• で接続されます。例: Yu Gong の息子たちは髪を染めたいと考えています。集合的に

• #yuGong>.people{
     			color: red;
  }

  ログイン後にコピー

注: この時点で、Yu Gong の子孫のうち、国民の
• 息子

  は全員髪を染めることになります。Yu Gong の孫と偉人たち-孫たちは髪を染めません。

  まだ若いからです
ここでは子要素 (実の息子) のみが選択されます

• 3. 近くの兄弟セレクター

関数: 別の要素の直後の要素を選択し、両方とも同じ親要素を持ちます。形式:セレクターはプラス記号「 」を使用して、前後の 2 つのセレクターをリンクします。セレクター内の 2 つの要素は

を持ち、2 番目の要素は
• 最初の要素

• に厳密に従う必要があります。例: 3 番目ひょうたん 7 兄弟のうちの子は髪を染める必要があります (2 番目の子を使用して 3 番目の子を見つけます)

  #secondBaby+#thirdBaby{
     			color: red;
  }

  ログイン後にコピー
  4. 普通の兄弟セレクタ

形式: 「~」を使用して前後の 2 つのセレクターをリンクします。セレクター内の 2 つの要素は 同じ親

が最初の要素
• に続く必要はありません。

• 例: カラバッシュ 7 兄弟の 3 番目の赤ちゃんが髪を染めたいと考えています (大きな赤ちゃんを使用して 3 番目の赤ちゃんを見つけます)

  #bigBaby~#thirdBaby{
     			color: red;
  }

  ログイン後にコピー
  4. 偽のクラスと疑似要素セレクター

• ##0. 「疑似」とは何ですか?

#必読: http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

• 1. 疑似クラスセレクター

関数: 既存の要素が特定の状態にあるときに使用されます。 、対応するスタイルを追加すると、この状態はユーザーの行動に基づいて動的に変化します。

以下では、上で詳しく説明されていない ステータス疑似クラスのみを紹介します

• 1 ) link

• 関数: 要素の未訪問のスタイルを設定します (ハイパーリンク)

形式:

a:link{...}

• 2) 訪問済み

• 機能: 要素の訪問済みスタイルを設定します (ハイパーリンク)

形式:

a:visited{...}

• 3)hover

• 関数: マウスがホバーしているときの要素のスタイルを設定します。

形式:

a:hover{...}

• 4) activer

• 関数:要素を設定します。 アクティビティのスタイル (マウスが押された)

a:active{...}

5) focus
• 関数: フォーカスを取得する要素のスタイルを設定します

##形式:

a:focus{...}