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. 階層セレクター

1. 子孫要素コンパウンダー

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

形式: 外側のラベルが前に書かれ、内側のラベルが後ろに書かれ、中央に区切られます。スペースを含む

• 例: 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 つの要素は 同じ親

を持ちますが、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{...}

注

: 疑似クラスの順序を逆にせず、link-visited-hover-active の順序に従ってください。そうしないと、エラーが発生する可能性があります。
2. 疑似要素セレクター

• • 関数: ドキュメント ツリーにないいくつかの要素を作成し、それらにスタイルを追加するために使用されます。

  #セレクター関数形式##::first-letter#p::first-letter # #::first-lineセレクターの最初の行を選択します: :beforeセレクターの前にコンテンツを追加し、content 属性を使用して挿入するコンテンツを指定します。 (挿入されたコンテンツは実際にはドキュメント ツリーにありません) :: afterセレクターの後にコンテンツを追加し、content 属性を使用して挿入するコンテンツを指定します。 (挿入されたコンテンツは実際にはドキュメント ツリーにありません) :: selection ユーザーが選択または強調表示した部分と一致します 5. 属性セレクター

  セレクターの最初の文字を選択
  	p::first-line
  	p::before{content: "hello ";}
  	p::after{content: "hello ";}
  	p::selection

  セレクター関数形式E[att^=value]E タグの att 属性値が 'value'p[id^='yuan' ]{color で始まることを示します: red;}E[att$=value]E タグの att 属性値が 'value' は E タグの att 属性値を表します「値」文字列プログラミング関連の知識の詳細については、こちらをご覧ください。 : プログラミング入門! ！

  # で終わることを示しますp[id$='chao']{ color: blue;}		E[att*=value]
  p[class*='shi']{font-size: 35px;}

以上がCSS セレクターの学習: 複合セレクターについて話しましょう (詳細な紹介)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。