CSS 複合セレクタの具体的な使用法

交差点セレクター

交差セレクターは、直接接続された 2 つのセレクターで構成されます。最初のセレクターは要素セレクターで、2 番目のセレクターはクラスセレクターまたは ID セレクターである必要があります。2 つのセレクターは、スペースを入れずに連続して記述する必要があります。
交差セレクターによって選択される要素は、最初のセレクターによって指定された要素タイプである必要があり、要素には 2 番目のセレクターに対応する ID 名またはクラス名が含まれている必要があります。交差セレクターによって選択された要素のスタイルは、3 つのセレクター、つまり最初のセレクターのスタイルになります。

文法：

要素セレクター。クラスセレクター | #IDセレクター { 
 属性 1: 属性値 1;
 属性2: 属性値2;
}

構文の説明: 「クラスセレクター | ID セレクター」は、クラスセレクターまたは ID セレクターを使用することを意味します。

例：

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title> 交差セレクターを使用してスタイルを設定する</title>
<スタイル>
/* 要素セレクターは境界線と下余白のスタイルを設定します*/
div { 
 境界線: 5px 実線の赤;
 下マージン:20px;
}
/* 交差点セレクタの背景色を設定します */
div.txt { 
 背景:#33FFCC;
}
/* フォント形式を設定するクラスセレクタ */ 
。TXT { 
 フォントスタイル:斜体;
}
</スタイル>
</head>
<本文>
    <div> 要素セレクター効果</div>
    <div class="txt"> 交差点セレクター効果</div>
    <span class="txt">クラスセレクター効果</p>
</本文>
</html>

ユニオンセレクター

ユニオンセレクターは、グループセレクターまたはグループセレクターとも呼ばれ、2つ以上の任意のセレクターで構成されます。異なるセレクターは「,」で区切られ、複数のセレクターの「一括宣言」を実現します。

ユニオンセレクターの特徴は、ユニオンセレクター内の各セレクターに対して設定したスタイルが有効になることです。

結合セレクターの機能は、異なるセレクターから同じスタイルを抽出し、1 か所にまとめて 1 回限りの定義を行うことで、CSS コードの量を簡素化することです。

文法：

セレクター1、
セレクター2、
セレクター3、
 { 
     属性 1: 属性値 1;
     属性2: 属性値2;
}

構文の説明: セレクタータイプは任意で、基本セレクターまたは複合セレクターにすることができます。

例：

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title> ユニオンセレクターを使用してスタイルを設定する</title>
<スタイル>
div {
    下マージン:10px;
    border:3px 赤一色;
}
スパン { 
    フォントサイズ:26px;
}
ｐ { 
    フォントスタイル:斜体;
}
/* ユニオンセレクタを使用して要素の共通スタイルを設定します */
スパン、
.p1,
#d1 { 
    背景:#CCC;
}
</スタイル>
</head>
<本文>
     <div id="d1"> これは DIV1 です</div>
     <div>これは DIV2 です</div>
     <p class="p1"> これは段落 1 です</p>
     <p> これは第2段落です</p>
     <span>これは SPAN です</div>
</本文>
</html>

子孫セレクター

子孫セレクター (包含セレクターとも呼ばれます) は、指定された要素の子孫要素を選択するために使用されます。子孫セレクターを使用すると、ターゲット要素をより速く正確に見つけることができます。

文法：

セレクター 1 セレクター 2 セレクター 3 { 
    属性 1: 属性値 1;
 属性2: 属性値2;
}

例：

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>子孫セレクターを使用してスタイルを設定する</title>
<スタイル>
#box1 .p1 { /* 子孫セレクター */
    背景:#CCC;
}
#box2 p { /* 子孫セレクター */
    背景:#CFC;
}
</スタイル>
</head>
<本文>
     <div id="box1">
         <p class="p1"> 段落 1</p>
         <p class="p2"> 段落 2</p>
     </div>
     <div id="box2">
         <p class="p1"> 段落 3</p>
         <p> 段落 4 </p>
     </div>
     <p class="p1"> 段落 5</p>
     <p> 段落 6 </p>
</本文>
</html>

子セレクター

子孫セレクターは、指定されたタイプの要素のすべての子孫要素を選択できます。要素のすべての子要素のみを選択する場合は、子要素セレクターを使用する必要があります。

文法：

セレクタ1> セレクタ2 {
      属性1: 属性値1; 
      属性2: 属性値2;
}

構文の説明: 「>」は左結合文字と呼ばれ、その両側にスペースが使用できます。「セレクター 1 > セレクター 2」は、「セレクター 1 で指定された要素であるセレクター 2 で指定されたすべての子要素を選択する」ことを意味します。

例：

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>サブ要素セレクタの使用例</title>
<スタイル>
h1>スパン{
    色：赤;
}
</スタイル>
</head>
<本文>
    <h1> これは非常に <span> 重要</span> かつ <span> 極めて重要な</span> ステップです。 </h1>
    <h1> これは本当に <em><span> 重要</span> かつ <span> 極めて重要な</span></em> ステップです。 </h1>
</本文>
</html>

隣接兄弟セレクター

ある要素の直後にあり、両方の親要素が同じである要素を選択する必要があるときは、隣接兄弟セレクターを使用できます。

文法：

セレクタ1+セレクタ2 {
     属性1: 属性値1; 
     属性2: 属性値2;
}

例：

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title> 隣接兄弟セレクターの適用例</title>
<スタイル>
h1+p {
     色：赤;
     フォントの太さ:太字;
     上マージン:50px;
}
p+p{
     色:青;
     テキスト装飾:下線;
}
</スタイル>
</head>
<本文>
     <h1>これは第 1 レベルの見出しです</h1>
     <p> これは段落 1 です。 </p>
     <p> これは第2段落です。 </p>
     <p> これは第3段落です。 </p>
</本文>
</html>

属性セレクタ

CSSでは、属性と属性値に基づいて要素を選択することもできます。このときに使用するセレクターを属性セレクターと呼びます。属性セレクターには主に 2 つの形式があります。

文法：

属性セレクター 1 属性セレクター 2...{
     属性1: 属性値1;
     属性2: 属性値2;
}

要素セレクター 属性セレクター 1 属性セレクター 2... {
     属性1: 属性値1;
     属性2: 属性値2;
}

構文の説明: 属性セレクターは [属性式] として記述されます。属性式は、属性名または「属性 = 属性値」などの式になります。

属性セレクタの適用:

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>属性セレクターの適用</title>
<スタイル>
[title]{/* title属性を持つ要素を選択する */
     色: #F6F;
}
a[href][title]{/* href属性とtitle属性の両方を持つ要素を選択します*/
     フォントサイズ: 36px;
}
img[alt]{/* alt属性を持つimg要素を選択する*/
     境界線: 3px #f00 実線;
}
p[align="center"]{/* align属性がcenterに等しいp要素を選択する*/
     色: 赤;
    フォントの太さ: 太字;
}
</スタイル>
</head>
<本文>
     <h2> 属性セレクターのスタイルを適用: </h2>
     <h3 title="Helloworld">Helloworld</h3>
     <a title="ホーム"href="#"> ホームに戻る</a><br/><br/>
     <img src="miaov.jpg" alt="ロゴ" />
     <p align="center"> 段落 1</p>
     <時間 />
     <h2> 属性セレクタースタイルは適用されていません <h3>Helloworld</h3>
     <a href="#"> ホーム ページに戻る</a><br/><br/>
     <img src="miaov.jpg">
     <p align="right"> 段落 2</p>
</本文>
</html>

CSS 複合セレクターの具体的な使い方についてはこれで終わりです。CSS 複合セレクターに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

>>: Dockerコンテナを介してランプアーキテクチャを構築するプロセス