CSS セレクターの学習: 複合セレクターについて話しましょう (詳細な紹介)-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2021-07-16 10:11:30

転載

2272 人が閲覧しました

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

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

#1. 交差セレクター

#機能: 同時に 2 つのタグに一致するコンテンツを選択します
##形式: 1.
2 つの
例: Teacherクラスの生徒全員に髪を赤く染めるよう要求します。
```
div.student{
				color: red;
}
```
ログイン後にコピー
2. ユニオン複合セレクター

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

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

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

ログイン後にコピー

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

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

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

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

#yuGong .people{
   			color: red;
   		}

ログイン後にコピー

注: 現時点ではユゴン子孫の中では
ユゴンの息子、孫、ひ孫も含めて、人々の子孫全員が
髪を染めます...

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

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

で接続されます。例: Yu Gong の息子たちは髪を染めたいと考えています。集合的に
```
#yuGong>.people{
   			color: red;
}
```
ログイン後にコピー
息子
は全員髪を染めることになります。Yu Gong の孫と偉人たち-孫たちは髪を染めません。
まだ若いからです

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

関数: 別の要素の直後の要素を選択し、両方とも同じ親要素を持ちます。形式:セレクターはプラス記号「」を使用して、前後の 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{...}

ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。