階層セレクターの用途は何ですか?

階層セレクターの使用法は何ですか?具体的なコード例が必要です

階層セレクターは、要素間の関係を渡すことができる CSS のセレクターです。要素。階層セレクターには、子セレクター、子孫セレクター、隣接兄弟セレクター、および一般兄弟セレクターが含まれます。

子セレクターは大なり記号 (>) で表され、選択された要素の直接の子要素を示します。たとえば、親クラスを持つ要素の下にある、子クラスを持つ直接の子要素をすべて選択します。

.parent > .child {
    //样式
}

子孫セレクターは、選択した要素の子孫要素を示すスペースで表されます。たとえば、クラス祖先を持つ要素の下にあるクラス子孫のすべての子孫要素を選択します。

.ancestor .descendant {
    //样式
}

隣接する兄弟セレクター (隣接兄弟セレクター) はプラス記号 ( ) で表され、選択された要素の隣接する兄弟であることを示します。要素が選択されています。たとえば、クラス element1 の要素を選択し、続いてクラス element2 の兄弟要素を選択します:

.element1 + .element2 {
    //样式
}

一般的な兄弟セレクターは、要素の一般的な選択を示すチルダ (~) で表されます。たとえば、クラス element1 の要素の後に続くクラス element2 の兄弟要素をすべて選択します。

.element1 ~ .element2 {
    //样式
}

階層セレクターを使用すると、要素間の関係に基づいてターゲット要素を選択できるため、より正確なスタイル制御が実現します。以下は具体的なコード例です:

HTML コード:

<div class="parent">
    <div class="child">这是子元素1</div>
    <div class="child">这是子元素2</div>
</div>
<div class="ancestor">
    <div class="descendant">这是后代元素1</div>
    <div class="descendant">这是后代元素2</div>
</div>
<div class="element1">这是元素1</div>
<div class="element2">这是元素2</div>
<div class="element2">这是元素3</div>

CSS コード:

.parent > .child {
    color: red;
}

.ancestor .descendant {
    font-size: 20px;
}

.element1 + .element2 {
    background-color: blue;
}

.element1 ~ .element2 {
    text-align: center;
}

上記のコードでは、子セレクター (.parent > .child) を使用します。 ) 親クラスを持つ要素内の直接の子要素を選択し、そのフォントの色を赤に設定します。子孫セレクター (.ancestor .descendant) を使用して、クラス ancestor の要素の下にあるクラス子孫のすべての子孫要素を選択し、フォント サイズを 20px に設定します。隣接する兄弟セレクター (.element1.element2) を使用して、クラス element1 の要素の直後にあるクラス element2 の兄弟要素を選択し、その背景色を青に設定します。一般的な兄弟セレクター (.element1 ~ .element2) を使用して、クラス element1 の要素に続くクラス element2 の後続の兄弟要素をすべて選択し、それらのテキストを中央に表示します。

階層セレクターを使用すると、HTML 要素をより柔軟に選択でき、異なる階層セレクターを組み合わせることで、さまざまなスタイル効果を実現できます。階層セレクターの使用をマスターすると、CSS スタイルがより保守しやすく読みやすくなり、開発効率も向上します。

以上が階層セレクターの用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。