ターゲット要素のラベルをより正確かつ細かく選択できます
子孫セレクター
-
要素または要素のグループの子孫を選択します
-
前面に外側のラベルを、背面に内側のラベルをスペースで区切って書き、最初に父親と祖父、次に息子と孫を書きます。
-
包含セレクターは、2つの単純なセレクターをスペースで接続します。フロントセレクターは含まれているオブジェクトを示し、後者のセレクターは含まれているオブジェクトを示します。
<style>
#red p{
color:red;
}
</style>
<body>
<div class="red">
<p>aaaaa </p>
</div>
</body>
- 含まれているラベルを選択できます。
子要素セレクター
- 子要素セレクターは、要素の子要素（親子）である要素のみを選択できます
- 子セレクターは、鋭角（>）を使用して2つの単純なセレクターを接続します。前部セレクターは含まれる親オブジェクトを表し、後部セレクターは含まれる子オブジェクトを表します。
- その文言はと途中で、背中に書かれたEDITORIAL親、子ラベルにラベルを付けることで
>、接続 - 利点：子孫セレクターと比較して、マッチング範囲が小さくなり、階層構造からマッチングターゲットがより明確になります。
- 短所：セレクターを含める場合と比較して、一致する範囲が制限され、ドキュメントの構造に精通している必要があります。
<style>
div>p{
color:red;
}
</style>
<body>
<div>
<p>aaaaa </p>
</div>
<div>
<p>aaaaa </p>
</div>
</body>
交差点セレクター
- 交差セレクターは2つのセレクターで構成され、見つかったラベルは、ラベル1の特性とラベル2の特性の両方を満たす必要があります。
- 1つ目はタグセレクター、2つ目はクラスセレクター
- h3.specialなど、2つのセレクターの間にスペースを入れないでください。
ユニオンセレクター
-
一部のセレクターが同じスタイルを定義している場合は、ユニオンセレクターを使用できます。
-
グループセレクターは、コンマ（、）を使用して2つの単純なセレクターを接続します。前のセレクターと一致する要素と後者のセレクターと一致する要素は、グループセレクターの結果セットとして混合されます。
-
ユニオンセレクターは、集合的に宣言するためによく使用されます
| セレクター | 効果 | 特徴 | 使い方 | セパレーターと使用法 |
|---|---|---|---|---|
| 子孫セレクター | 要素の子孫を選択するために使用されます | すべての子孫を選択することです | もっと | 記号は、スペース .nav A |
| 子セレクター | 最新の要素を選択 | 息子だけを選ぶ | 少ない | 記号は**> **です。Nav> p |
| 交差点セレクター | 2つのラベルが接する部分を選択します | 両方と | 少ない | 記号なし p.one（タグセレクタークラスセレクター） |
| ユニオンセレクター | 同じスタイルのセレクターをいくつか選択してください | 集団宣言に使用できます | もっと | シンボルはコンマ .nav、.headerです。 |
