cssを使用してHTMLページの要素を1対1、1対多、または多対1で制御するには、CSSセレクターが必要です。
（I）セレクターとは何ですか？
各cssスタイル定義は2つの部分で構成され、形式は次のとおりです。[コード]セレクター{スタイル} [/コード] {}の前の部分は「セレクター」です。
「セレクター」は、{}の「スタイル」のオブジェクト、つまり「スタイル」が適用されるWebページの要素を指定します。
（ii）5つのCSSセレクター
⑴ラベルセレクター（エレメントセレクター）
⑵IDセレクター（一意性、1つの参照）
⑶クラスセレクター（シングルクラスセレクター、マルチクラスセレクター）
⑷属性セレクター（単純属性選択、特定属性選択、部分属性選択、特定属性選択）
⑸派生セレクター（子孫セレクター）、子セレクター（子セレクター）、隣接する兄弟セレクター（隣接する兄弟セレクター）
（iii）要素セレクター（ラベルセレクター）
完全なHTMLページは、さまざまなタグで構成されています。タグセレクター：HTMLタグ名をセレクターとして使用し、タグ名で分類し、ページ上の特定のタイプのタグに統一されたCSSスタイルを割り当てることを指します。
HTMLスタイルを設定する場合、セレクターは通常、p、h1、em、a、さらにはhtml自体などのHTML要素になります。
例えば：
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
上記のcssコードは、ドキュメント全体に黒い背景を追加します。すべてのp要素のフォントサイズを30ピクセルに設定し、灰色の背景を追加します。ドキュメント内のすべてのh2要素に赤い背景を追加します。
㈣IDセレクター
⑴IDセレクターを使用すると、ドキュメント要素に依存しない方法でスタイルを指定できます。
⑵IDセレクターは、特定のIDでマークされたHTML要素に特定のスタイルを指定できます。要素は、一意の要素IDに基づいて選択されます。つまり、同じIDは同じドキュメントページに1回しか表示されません。
IDセレクターは「＃」で定義されます。
例：cssでは、次の2つのIDセレクターで、最初のセレクターは要素の色を赤として定義でき、2番目のセレクターは要素の色を黄色として定義できます。
#red{color：red；}
#yellow{color：yellow；}
以下のHTMLコードでは、id属性がredのp要素は赤で表示され、id属性がgreenのp要素は緑で表示されます。
<p id="red">这个段落是红色。</p>
<p id="yellow">这个段落是黄色。</p>
㈤クラスセレクター
クラスセレクターは、クラス名を使用して要素を選択します。前提は、要素のクラス属性をHTMLで定義し、class="类名"「。」を使用してそれを識別し、その後にクラス名を使用することです。****
（1）シングルクラスセレクター
クラスセレクタを使用すると、ドキュメント要素に依存しない方法でスタイルを指定できます。セレクターは、単独で使用することも、他の要素と組み合わせて使用することもできます。
①HTMLコードを変更する
クラスセレクターを使用する前に、クラスセレクターが正しく機能するように、特定のドキュメントマークアップを変更する必要があります。クラスセレクターのスタイルを要素に関連付けるには、クラスを適切な値として指定する必要があります。
次のHTMLコードを参照してください。
<h1 class="important">
This heading is very important
</h1>
<p class="impportant">
This paragraph is very important.
</p>
上記のコードでは、2つの要素のクラスが重要として指定されています。最初の見出し（h1要素）と2番目の段落（p要素）です。
②文法
次の構文を使用して、これらの分類された要素にスタイルを適用します。つまり、クラス名の前にドット（。）があり、ワイルドカードセレクターと組み合わされます。
.important {color:red;}
同じクラス名のすべての要素のみを選択する場合は、クラスセレクターのワイルドカードセレクターを無視できます。これによる悪影響はありません。
.important {color:red;}
③複合要素セレクター
クラスセレクターは、要素セレクターと組み合わせて使用できます。
♧たとえば、段落を赤いテキストとして表示するだけです。
p.important {color:red;}
セレクターは、クラス属性に重要が含まれているすべてのp要素に一致しますが、このクラス属性があるかどうかに関係なく、他のタイプの要素には一致しません。
セレクターp.importantは、「クラス属性値が重要であるすべての段落」として解釈されます。h1要素は段落ではないため、このルールのセレクターはそれに一致しません。したがって、h1要素は赤いテキストにはなりません。
♧例：h1要素にさまざまなスタイルを指定するには、セレクターを使用できます
h1.important：
p.important {color:red;}
h1.important {color:blue;}
⑵マルチタイプセレクター
HTMLでは、クラス値にスペースで区切られた単語のリストが含まれる場合があります。
たとえば、特定の要素を重要であると同時に警告としてマークする場合は、次のように記述できます。
<p class="important warning">
This paragraph is very important warning.
</p>
注：これらの2つの単語の順序は重要ではなく、重要な警告として記述できます。
クラスが重要であるすべての要素が太字であり、クラスが警告であるすべての要素がイタリック体であり、クラスが重要と警告の両方を含むすべての要素が銀色の背景を持っていると仮定します。
あなたは書ける：
.important {font-weight:bold;}
.warning{font-style:italic;}
.important .warning{background:silver;}
2つのクラスセレクターをリンクすることにより、これらのクラス名を含む要素のみを同時に選択できます（クラス名の順序は制限されません）。
マルチクラスセレクターにクラス名リストにないクラス名が含まれている場合、一致は失敗します。
㈥属性セレクター
属性セレクターは、属性と属性値に基づいて要素を選択できます。
⑴簡単な属性選択
属性値に関係なく、特定の属性を持つ要素を選択する場合は、単純な属性セレクターを使用できます。
例1：タイトル（タイトル）を含むすべての要素を赤に変更するには、次のように記述します。
[title] {color:red;}
例2：href属性を持つアンカー（要素）にのみスタイルを適用します。
a[herf] {color:red;}
例3：複数の属性に基づいて選択するには、属性セレクターをリンクするだけです。
href属性とtitle属性の両方を持つHTMLハイパーリンクのテキストを赤に設定するには、次のように記述します。
a[herf] [title] {color:red;}
例4：alt属性を持つすべての画像にスタイルを適用して、これらの有効な画像を強調表示します。
img[alt] {border:5px solid red;}
⑵特定の属性値に応じて選択
例1：Webサーバー上の指定されたドキュメントへのハイパーリンクを赤に変更するには、次のように記述します。
a [href="http://www.baidu.com"] {color:red;}
例2：複数の属性値セレクターをリンクしてドキュメントを選択します。
a [href="http://www.baidu.com"] [title="baidu"] {color:red;}
これにより、最初のハイパーリンクのテキストが赤に変更されますが、2番目または3番目のリンクは影響を受けません。
注：このフォーマット要件は、属性値と完全に一致する必要があります。
属性値にスペースで区切られた値のリストが含まれている場合、マッチングに問題が生じる可能性があります。
⑶いくつかの属性値に従って選択します
属性値の単語リストに基づいて単語を選択する必要がある場合は、ティルデ（〜）を使用する必要があります。
class属性にimportantを含む要素を選択するには、次のセレクターを使用してこれを行うことができます。
p[class~="important"] {color:yellow;}
注：ティルデが省略されている場合は、正確な値のマッチングを完了する必要があることを意味します。
⑷特定の属性選択タイプ
例えば：[lang |="en"] {color:red;}
上記のルールは、lang属性がenと等しいか、en-で始まるすべての要素を選択します。したがって、次のサンプルタグの最初の3つの要素は選択されますが、最後の2つの要素は選択されません。
（Vii）子孫セレクター
⑴子孫セレクターは、封じ込めセレクターとも呼ばれます。子孫セレクターは、要素の子孫である要素を選択できます。
（2）子孫セレクターでは、ルールの左側のセレクターに、スペースで区切られた2つ以上のセレクターが含まれます。セレクター間のスペースはコンビネーターです。
⑶各スペースコンバイナーは、「...で見つかりました...」、「...の一部として...」、「...の子孫として...」と解釈できますが、セレクターは右から左に読み取る必要があります。
例：h1要素のem要素にのみスタイルを適用するには、次のように記述できます。
h1 em {colopr:red;}
⑴上記のルールは、h1要素の子孫であるem要素のテキストを赤に変更します。他のemテキスト（段落内のemやブロック引用など）は、このルールでは選択されません。
⑵h1emセレクターは、「h1要素の子孫である任意のem要素」と解釈できます。セレクターを左から右に読みたい場合は、次のステートメントに変更できます：「emを含むすべてのh1は、次のスタイルをemに適用します」。
応用：
HTMLで可能なタスクを不可能にする可能性があります。サイドバーとメイン領域のあるドキュメントがあるとします。サイドバーの背景は青、メインエリアの背景は白です。どちらのエリアにもリンクのリストが含まれています。サイドバーの青いリンクが表示されないため、すべてのリンクを青に設定することはできません。解決策は、子孫セレクターを使用することです。この場合、サイドバーを含むdivのサイドバーのクラス属性値を指定し、メインエリアのクラス属性値をmaincontentに設定できます。
次のスタイルを記述します。
div.sidebar {background:blue;}
div.maincontent {background:white;]
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
㈧サブエレメントセレクター
⑴子セレクターは、特定の要素の子要素である要素のみを選択できます。
⑵子孫要素を選択せず、範囲を狭めたい場合は、特定の要素の子要素のみを選択してください。子セレクター（子セレクター）を使用してください。
（3）サブセレクターは大なり記号（サブコンバイナー）を使用します。サブコンバイナの両側に空白を含めることができますが、これはオプションです。
例：h1要素の子要素のみである強力な要素を選択するには、次のように記述できます。
h1 > strong {color:red;}
右から左に読む場合、セレクターh1> strongは、「h1の子要素であるすべての強い要素を選択する」と解釈できます。
このルールは、最初のh1の下の2つの強い要素を赤に変更しますが、2番目のh1の強い要素は影響を受けません。
∨隣人兄弟セレクター
⑴隣接する兄弟セレクターは、別の要素の直後に要素を選択でき、両方とも同じ親要素を持ちます。
⑵隣接する兄弟セレクターは、隣接する兄弟コンビネーターであるプラス記号（+）を使用します。サブコンバイナーと同様に、隣接する兄弟の横に空白が存在する可能性があります。
例：h1要素の直後に表示される段落の上部マージンを増やしたい場合は、次のように記述できます。
h1 + p {margin-top:50px;}
このセレクターには、「h1要素の直後に表示される段落を選択します。h1要素とp要素には同じ親要素があります。」と表示されます。
具体的な説明：次のドキュメントツリーフラグメントを参照してください。
上記のスニペットでは、div要素に2つのリスト（順序なしリストと順序付きリスト）が含まれています。各リストには3つのリストアイテムが含まれています。2つのリストは隣接する兄弟であり、リスト項目自体も隣接する兄弟です。
ただし、最初のリストのリストアイテムと2番目のリストのリストアイテムは隣接する兄弟ではありません。これらの2つのリストアイテムのセットは同じ親要素に属していないためです（多くても、それらはいとことして数えることができます）。
簡単に言えば、ulとolは隣接する兄弟であり、ulのリストアイテムとolのリストアイテムは隣接する兄弟ではありません。
私は現在フロントエンド開発に取り組んでいます。今フロントエンド開発技術を学びたいと思っていて、フロントエンドの学習を始める過程で学習方法、学習ルート、学習効率などについて質問があれば、私のフロントエンドへの参加を申し込むことができます交換スカートの学習：421374697。自己学習型のフロントエンドである初心者、チェンジャー、初心者を集めています。また、フロントエンドテクノロジー、フロントエンドの工場インタビューの質問、フロントエンド開発のソースコードのチュートリアル、PDFドキュメントを作成しているときにコンパイルされたフロントエンドの学習マインドマップもあります。必要に応じて、スカートピッグから本やチュートリアルを入手できます。
注：コンビネーターで選択できるのは、隣接する2人の兄弟の2番目の要素のみです。以下のセレクターを見てください。
li + li {font-weight:bold;}
上記のセレクターは、リストの2番目と3番目の項目のみを太字にします。最初のリスト項目は影響を受けません。