Apakah pemilih hierarki?

Pemilih hierarki ialah pemilih yang biasa digunakan dalam CSS, yang boleh memilih berdasarkan perhubungan antara elemen. Berikut ialah beberapa pemilih hierarki dan contoh kod yang biasa digunakan:

1. Pemilih Keturunan:

Pemilih keturunan digunakan untuk memilih semua elemen keturunan dalam elemen yang ditentukan. Sintaksnya ialah: keturunan nenek moyang. 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

Contoh:

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

Pemilih Kanak-kanak:
🎜Pemilih kanak-kanak digunakan untuk memilih elemen anak langsung bagi elemen yang ditentukan. Sintaksnya ialah: ibu bapa > 🎜🎜Contoh: 🎜rrreee<ol start="3">🎜Pemilih Adik Beradik Bersebelahan: 🎜🎜🎜Pemilih Adik Beradik Bersebelahan digunakan untuk memilih elemen adik beradik seterusnya bagi elemen yang ditentukan. Sintaksnya ialah: <code>elemen + adik beradik. 🎜🎜Contoh: 🎜rrreee
🎜Pemilih Adik Beradik Umum: 🎜🎜🎜Pemilih adik beradik bersebelahan digunakan untuk memilih semua elemen adik beradik selepas elemen yang ditentukan. Sintaksnya ialah: elemen ~ adik beradik. 🎜🎜Contoh: 🎜rrreee🎜Pemilih hierarki sangat berguna dalam CSS untuk membuat pilihan penggayaan yang fleksibel berdasarkan hubungan antara elemen. Di atas ialah beberapa pemilih hierarki biasa dan contoh kod mereka saya harap ia akan membantu anda. 🎜

Atas ialah kandungan terperinci Apakah pemilih hierarki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!