Apakah pemilih hierarki?

王林
Lepaskan: 2024-02-18 21:39:07
asal
552 orang telah melayarinya

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>    <!-- 不被选择 -->
Salin selepas log masuk
  1. 子元素选择器(Child Selector):

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

示例:

<style>
    /* 选择父元素为 <div> 的直接子元素 <p> */
    div > p {
        color: red;
    }
</style>
<div>
    <p>这是一个段落。</p>       <!-- 被选择 -->
    <span>
        <p>这是另一个段落。</p>  <!-- 不被选择 -->
    </span>
</div>
Salin selepas log masuk
  1. 兄弟选择器(Adjacent Sibling Selector):

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

示例:

<style>
    /* 选择 <p> 元素下一个兄弟元素 <span> */
    p + span {
        color: green;
    }
</style>
<p>这是一个段落。</p>
<span>这是一个<span>元素。</span></span>  <!-- 被选择 -->
<span>这是另一个<span>元素。</span></span>  <!-- 不被选择 -->
Salin selepas log masuk
  1. 相邻兄弟选择器(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>    <!-- 被选择 -->
Salin selepas log masuk
    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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!