Apakah ciri-ciri pemilih tahap?

Apakah ciri-ciri pemilih hierarki yang diperlukan contoh kod khusus

Pemilih hierarki (Pemilih Hierarki CSS) ialah jenis pemilih CSS khas yang membolehkan kami memilih elemen tertentu melalui perhubungan mereka. Pemilih hierarki menggunakan perhubungan ibu bapa-anak, adik-beradik, dsb. antara elemen untuk memilih elemen sasaran dengan lebih mudah dan tepat. Berikut akan memperkenalkan beberapa ciri umum pemilih hierarki, dengan contoh kod khusus.

1. Pemilih Keturunan

Pemilih Keturunan membolehkan kami memilih elemen dengan menyatakan perhubungan hierarki dalam elemen. Ia menggunakan ruang (karakter ruang) untuk menyambung dua elemen, yang bermaksud bahawa semua elemen kedua dalam elemen pertama akan dipilih.

Sebagai contoh, kita mempunyai struktur HTML seperti berikut:

<div id="parent">
  <p>第一个段落</p>
  <p>第二个段落</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

Kita boleh menggunakan pemilih keturunan untuk memilih item senarai:

#parent li {
  color: red;
}

Kod di atas akan memilih semua elemen di bawah elemen dengan id sebagai "induk" Warna teks elemen li ditetapkan kepada merah. id为"parent"的元素下的所有li元素的文本颜色设置为红色。

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

子元素选择器只会选择作为某个元素直接子元素的元素。它使用大于号（>`）连接两个元素。

继续上述例子，如果我们只想选择直接作为id为"parent"的元素的子元素的li元素，我们可以使用子元素选择器：

#parent > ul > li {
  color: blue;
}

上述代码将只会将直接作为id为"parent"的元素子元素中的li元素的文本颜色设置为蓝色。

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

相邻兄弟选择器选择紧接在特定元素后的相邻兄弟元素。它使用加号（+）连接两个元素。

考虑以下HTML结构：

<div>
  <p>第一个段落</p>
  <h2 id="副标题">副标题</h2>
  <p>第二个段落</p>
  <h2 id="标题">标题1</h2>
  <p>第三个段落</p>
  <h2 id="标题">标题2</h2>
</div>

如果我们只想选择h2元素后面的第一个p元素，我们可以使用相邻兄弟选择器：

h2 + p {
  font-weight: bold;
}

上述代码将只会把紧接在h2元素后的第一个p

Pemilih Kanak-kanak

Pemilih kanak-kanak hanya akan memilih elemen yang merupakan anak langsung sesuatu elemen. Ia menggunakan tanda lebih besar daripada (>`) untuk menyambung dua elemen.

🎜Melanjutkan dengan contoh di atas, jika kita hanya mahu memilih elemen li yang secara langsung merupakan anak unsur dengan id sebagai "ibu bapa", kita boleh menggunakan pemilih elemen anak : 🎜 rrreee🎜Kod di atas hanya akan menetapkan warna teks elemen li yang secara langsung merupakan anak kepada elemen yang idnya ialah "induk" kepada biru. 🎜
🎜Pemilih Adik Beradik Bersebelahan 🎜🎜🎜Pemilih Adik Beradik Bersebelahan memilih elemen adik beradik bersebelahan sejurus selepas elemen tertentu. Ia menggunakan tanda tambah (+) untuk menyambung dua elemen. 🎜🎜Pertimbangkan struktur HTML berikut: 🎜rrreee🎜Jika kita hanya mahu memilih elemen p pertama selepas elemen h2, kita boleh menggunakan pemilih adik beradik bersebelahan: 🎜rrreee 🎜Kod di atas hanya akan menetapkan teks elemen p pertama sejurus selepas elemen h2 kepada tebal. 🎜🎜Ringkasnya, pemilih hierarki boleh memilih elemen sasaran dengan lebih tepat melalui hubungan antara elemen. Pemilih turunan memilih perhubungan hierarki dalam elemen melalui ruang, pemilih elemen kanak-kanak hanya memilih elemen yang merupakan anak langsung elemen, dan pemilih adik beradik bersebelahan memilih elemen adik beradik bersebelahan selepas elemen tertentu. Pemilih ini boleh membantu kami menggunakan gaya dan memanipulasi DOM dengan lebih fleksibel. 🎜🎜Terhad oleh ruang, artikel ini hanya memperkenalkan beberapa ciri biasa dan contoh kod pemilih hierarki. Dalam aplikasi sebenar, jika anda memerlukan pemahaman yang lebih mendalam tentang pelbagai penggunaan dan ciri pemilih hierarki, anda boleh merujuk kepada dokumen CSS atau tutorial dalam talian yang berkaitan. 🎜

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