子孫セレクター（CSSセレクター）

CSS子孫セレクターの詳細な説明

宛先セレクターは、指定された要素のすべての子孫要素を一致させるために使用されます。セレクターの最初の単純なセレクターは、祖先要素、つまり親要素、親要素の親要素など、構造の高レベルの要素を表します。 2番目の単純なセレクターは、私たちが一致させようとしている子孫要素を表します。

子孫のセレクターで使用されるコンバイナーは、スペース、水平タブ、キャリッジリターン、ラインブレーク、またはページブレイクなどのスペース文字です。コンビナーの周りにスペース文字が許可されるため、子孫セレクターの単純なセレクター間に複数のスペース文字を含めることができます。

次のHTMLスニペットを検討してください：

<code class="language-html"><ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2A</li>
      <li>Sub-item 2B</li>
    </ol>
  </li>
</ul></code>

次のセレクターを使用して、上記のフラグメントの要素を一致させようとします。

<code class="language-css">ul li {
  /* 声明 */
}</code>

この子孫セレクターは、各

要素が祖先としてli要素を持っているため、サンプルHTMLの4つのli要素すべてと一致します。 ul

上記の例では、

のolli要素を一致させるために子孫セレクターを使用することもできます。

<code class="language-css">ul * li {
  /* 声明 */
}
ul * * li {
  /* 声明 */
}
ul * ol li {
  /* 声明 */
}
ul li * li {
  /* 声明 */
}
ul ol li {
  /* 声明 */
}
ul li li {
  /* 声明 */
}
ul li ol li {
  /* 声明 */
}</code>

ただし、子孫セレクターを使用して、順序付けられていないリストのリストのみを一致させることはできません。これを行うには、サブセレクターが必要です。

例

子孫セレクターの実際のアプリケーションの例を見てみましょう。

このセレクターは、

要素の子孫であるすべての

<code class="language-css">ul li {
  /* 声明 */
}</code>

要素、つまり

要素が祖先としてul要素を持つすべての要素と一致します。 li ul CSS DescendantセレクターFAQ（FAQ）li

CSSの子孫セレクターと子セレクターの違いは何ですか？

CSSでは、子孫の両方のセレクターとサブセレクターの両方が、他の要素との関係に基づいて要素を選択するために使用されます。ただし、機能は異なります。子孫セレクターは、指定された要素の子孫であるすべての要素を選択します。これは、すべての子要素、孫の要素、great孫の要素などを選択することを意味します。一方、サブセレクターは、より深い子孫を選択することなく、指定された要素の直接の子要素のみを選択します。

子孫セレクターを使用してネストされた要素をスタイリングする方法は？

子孫セレクターを使用してネストされた要素をスタイルするには、祖先要素を指定し、その後にスペースで区切られた子孫要素を指定する必要があります。たとえば、

要素から派生したすべての段落要素をスタイリングしたい場合は、「

」と書く必要があります。これにより、スタイルは、どんなに深くネストされていても、すべての段落要素に適用されます。

単一のルールで複数の子孫セレクターを使用できますか？ div div p { /* 您的样式在此处 */ }はい、単一のルールで複数の子孫セレクターを使用できます。これは、複数のタイプの要素から派生した要素をスタイリングしたい場合に役立ちます。たとえば、 ""はdiv内のパラグラフ要素にスタイルを適用し、順序付けられていないリスト内の項目をリストします。

子孫セレクターの特異性は何ですか？

CSSルールの特異性は、その重要性の指標です。矛盾するルールがある場合、どのルールが適用されるかを決定します。子孫セレクターの特異性は、その組成セレクターの特異性の合計に等しくなります。たとえば、2つのタイプセレクターが含まれているため、「div p」の特異性は2です。

子孫のセレクターを備えた擬似クラスを使用できますか？

はい、子孫のセレクターを備えた擬似クラスを使用できます。これにより、要素の状態またはドキュメント内の場所に基づいて要素を選択できます。たとえば、 ""はdiv p:first-child { /* 您的样式在此处 */ }子要素として最初の段落要素を選択します。 div

カスケードは子孫セレクターにどのように影響しますか？

castificationは、CSSが要素に適用されるルールを決定するプロセスです。スタイルシートの後のルールまたはより高い特定のルールは、以前またはより低い特定のルールをカバーします。これは、子孫のセレクターと競合するルールがある場合、後の具体的なルールまたはより具体的なルールが適用されることを意味します。

属性セレクターを備えたDescendantセレクターを使用できますか？

はい、属性セレクターを備えた子孫セレクターを使用できます。これにより、要素の属性とドキュメント内のその位置に基づいて要素を選択できます。たとえば、 ""は、クラス「ハイライト」を持つ段落要素を選択し、

の子孫として選択します。 div p[class='highlight'] { /* 您的样式在此处 */ } div子孫セレクターを使用してテーブルをスタイルする方法は？

テーブルの要素とテーブル要素の関係に基づいて、テーブルの行、セル、タイトル、その他の要素を選択して、子孫セレクターを使用してテーブルをスタイリングできます。たとえば、 ""はテーブル内の各均等な行を選択します。

普遍的なセレクターを備えた子孫セレクターを使用できますか？ table tr:nth-child(even) { /* 您的样式在此处 */ }

はい、ユニバーサルセレクターを備えた子孫セレクターを使用できます。ユニバーサルセレクターは任意の要素と一致するため、指定された要素のすべての子孫を選択するために使用できます。たとえば、 "

"は

の子孫であるすべての要素を選択します。

div * { /* 您的样式在此处 */ }子孫セレクターを使用してフォームをスタイリングする方法は？ div

フォーム要素とフォーム要素の関係に基づいてフォーム要素を選択することにより、子孫セレクターを使用してフォームをスタイリングできます。たとえば、 ""はフォームのすべてのテキスト入力フィールドを選択します。

以上が子孫セレクター（CSSセレクター）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。