Was sind die hierarchischen Selektoren?

Der hierarchische Selektor ist ein häufig verwendeter Selektor in CSS, der basierend auf der Beziehung zwischen Elementen auswählen kann. Im Folgenden sind einige häufig verwendete hierarchische Selektoren und Codebeispiele aufgeführt:

1. Nachkommenselektor:

Der Nachkommenselektor wird verwendet, um alle Nachkommenelemente innerhalb des angegebenen Elements auszuwählen. Die Syntax lautet: Vorfahren Nachkomme. ancestor descendant。

示例：

<style>
    /* 选择所有 <div> 元素内的 <p> 元素 */
    div p {
        color: blue;
    }
</style>
<div>
    <p>这是一个段落。</p>     <!-- 被选择 -->
    <span>
        <p>这是另一个段落。</p>  <!-- 被选择 -->
    </span>
</div>
<p>这是一个独立的段落。</p>    <!-- 不被选择 -->

2. 子元素选择器（Child Selector）：

子元素选择器用于选择指定元素的直接子元素。其语法为：parent > child。

示例：

<style>
    /* 选择父元素为 <div> 的直接子元素 <p> */
    div > p {
        color: red;
    }
</style>
<div>
    <p>这是一个段落。</p>       <!-- 被选择 -->
    <span>
        <p>这是另一个段落。</p>  <!-- 不被选择 -->
    </span>
</div>

3. 兄弟选择器（Adjacent Sibling Selector）：

兄弟选择器用于选择指定元素的下一个兄弟元素。其语法为：element + sibling。

示例：

<style>
    /* 选择 <p> 元素下一个兄弟元素 <span> */
    p + span {
        color: green;
    }
</style>
<p>这是一个段落。</p>
<span>这是一个<span>元素。</span></span>  <!-- 被选择 -->
<span>这是另一个<span>元素。</span></span>  <!-- 不被选择 -->

4. 相邻兄弟选择器（General Sibling Selector）：

相邻兄弟选择器用于选择指定元素之后的所有兄弟元素。其语法为：element ~ sibling

Beispiel:

<style>
    /* 选择 <p> 元素后的所有兄弟元素 <span> */
    p ~ span {
        font-weight: bold;
    }
</style>
<p>这是一个段落。</p>
<span>这是一个<span>元素。</span></span>      <!-- 被选择 -->
<div>这是一个<div>元素。</div></div>          <!-- 被选择 -->
<span>这是另一个<span>元素。</span></span>    <!-- 被选择 -->

Untergeordneter Selektor:
🎜Der untergeordnete Selektor wird verwendet, um die direkten untergeordneten Elemente des angegebenen Elements auszuwählen. Die Syntax lautet: parent > child. 🎜🎜Beispiel: 🎜rrreee
🎜Angrenzender Geschwisterselektor: 🎜🎜🎜Der Geschwisterselektor wird verwendet, um das nächste Geschwisterelement des angegebenen Elements auszuwählen. Die Syntax lautet: Element + Geschwister. 🎜🎜Beispiel: 🎜rrreee
🎜Allgemeiner Geschwisterselektor: 🎜🎜🎜Der benachbarte Geschwisterselektor wird verwendet, um alle Geschwisterelemente nach dem angegebenen Element auszuwählen. Seine Syntax lautet: element ~ sibling. 🎜🎜Beispiel: 🎜rrreee🎜Hierarchische Selektoren sind in CSS sehr nützlich, um flexible Stilentscheidungen basierend auf der Beziehung zwischen Elementen zu treffen. Die oben genannten sind einige gängige hierarchische Selektoren und ihre Codebeispiele. Ich hoffe, sie werden Ihnen hilfreich sein. 🎜

Das obige ist der detaillierte Inhalt vonWas sind die hierarchischen Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!