Pemilih Keturunan (pemilih CSS)

Penjelasan terperinci mengenai pemilih keturunan CSS

Pemilih Destinasi digunakan untuk memadankan semua elemen keturunan elemen yang ditentukan. Pemilih mudah pertama dalam pemilih mewakili elemen nenek moyang-elemen peringkat tinggi dalam struktur, seperti elemen induk, elemen induk elemen induk, dll. Pemilih mudah kedua mewakili unsur -unsur keturunan yang kita cuba padankan.

Gabungan yang digunakan dalam pemilih keturunan adalah watak ruang: ruang, tab mendatar, pulangan kereta, rehat garis atau rehat halaman. Oleh kerana aksara ruang dibenarkan di sekitar kombiner, anda boleh memasukkan pelbagai watak ruang antara pemilih mudah dalam pemilih keturunan.

Pertimbangkan coretan HTML berikut:

<code class="language-html"><ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2A</li>
      <li>Sub-item 2B</li>
    </ol>
  </li>
</ul></code>

kami akan cuba memadankan elemen dalam serpihan di atas menggunakan pemilih berikut:

<code class="language-css">ul li {
  /* 声明 */
}</code>

Pemilih keturunan ini akan sepadan dengan semua empat elemen

dalam sampel HTML, kerana setiap elemen li mempunyai elemen li sebagai nenek moyangnya. ul

kita juga boleh menggunakan pemilih keturunan untuk memadankan elemen

dalam ol dalam contoh di atas: li

Walau bagaimanapun, kami tidak boleh menggunakan pemilih keturunan untuk memadankan hanya senarai item dalam senarai yang tidak teratur. Untuk melakukan ini, kita memerlukan sub-selektor.

<code class="language-css">ul * li {
  /* 声明 */
}
ul * * li {
  /* 声明 */
}
ul * ol li {
  /* 声明 */
}
ul li * li {
  /* 声明 */
}
ul ol li {
  /* 声明 */
}
ul li li {
  /* 声明 */
}
ul li ol li {
  /* 声明 */
}</code>

Contoh

mari kita lihat contoh aplikasi sebenar pemilih keturunan:

pemilih ini sepadan dengan semua

<code class="language-css">ul li {
  /* 声明 */
}</code>

unsur -unsur yang menjadi keturunan

unsur -iaitu, setiap ul elemen dengan li unsur sebagai nenek moyangnya. ul li FAQ Pemilih Keturunan CSS (FAQ)

Apakah perbezaan antara pemilih keturunan dan pemilih kanak -kanak dalam CSS?

Dalam CSS, kedua-dua pemilih keturunan dan sub-selektor digunakan untuk memilih elemen berdasarkan hubungan mereka dengan unsur-unsur lain. Walau bagaimanapun, mereka berfungsi dengan cara yang berbeza. Pemilih keturunan memilih semua elemen yang keturunan elemen yang ditentukan. Ini bermakna ia memilih semua elemen kanak-kanak, elemen cucu, elemen cucu, dll. Sebaliknya, sub-selektor hanya memilih elemen kanak-kanak langsung elemen yang ditentukan, tanpa memilih mana-mana keturunan yang lebih mendalam.

Bagaimana menggunakan pemilih keturunan untuk elemen bersarang gaya?

Untuk gaya bersarang gaya menggunakan pemilih keturunan, anda perlu menentukan elemen nenek moyang, diikuti oleh unsur -unsur keturunan, dipisahkan oleh ruang. Sebagai contoh, jika anda ingin gaya semua elemen perenggan yang diturunkan dari elemen

, anda harus menulis "". Ini akan menggunakan gaya untuk semua elemen perenggan dalam

tidak kira seberapa dalam mereka bersarang. div div p { /* 您的样式在此处 */ } Bolehkah saya menggunakan pemilih keturunan berganda dalam satu peraturan? div

Ya, anda boleh menggunakan pemilih keturunan yang banyak dalam satu peraturan. Ini berguna apabila anda mahu elemen gaya yang berasal dari pelbagai jenis elemen. Sebagai contoh, "" akan menggunakan gaya untuk elemen perenggan dalam

dan senarai item dalam senarai yang tidak teratur.

Apakah kekhususan pemilih keturunan?

kekhususan peraturan CSS adalah penunjuk kepentingannya. Ia menentukan peraturan mana yang akan digunakan apabila terdapat peraturan yang bercanggah. Kekhususan pemilih keturunan adalah sama dengan jumlah spesifikasi pemilih komposisinya. Sebagai contoh, kekhususan "div p" adalah 2, kerana ia mengandungi dua pemilih jenis.

Bolehkah saya menggunakan kelas pseudo dengan pemilih keturunan?

Ya, anda boleh menggunakan kelas pseudo dengan pemilih keturunan. Ini membolehkan anda memilih elemen berdasarkan keadaan elemen atau di mana ia berada dalam dokumen. Sebagai contoh, "" memilih elemen perenggan pertama sebagai elemen kanak -kanak div p:first-child { /* 您的样式在此处 */ }. div

Bagaimanakah Cascade mempengaruhi pemilih keturunan?

Pembekalan adalah proses yang mana CSS menentukan peraturan yang akan digunakan untuk unsur -unsur. Peraturan kemudian atau peraturan khusus yang lebih tinggi dalam lembaran gaya akan meliputi peraturan yang lebih awal atau lebih rendah. Ini bermakna jika anda mempunyai peraturan yang bertentangan dengan pemilih keturunan, kemudian atau lebih banyak peraturan khusus akan digunakan.

Bolehkah saya menggunakan pemilih keturunan dengan pemilih atribut?

Ya, anda boleh menggunakan pemilih keturunan dengan pemilih atribut. Ini membolehkan anda memilih elemen berdasarkan atribut elemen dan kedudukannya dalam dokumen. Sebagai contoh, "" akan memilih elemen perenggan dengan kelas "sorot" dan sebagai keturunan

. div p[class='highlight'] { /* 您的样式在此处 */ } div Bagaimana menggunakan pemilih keturunan ke meja gaya?

Anda boleh menggunakan pemilih keturunan untuk gaya jadual dengan memilih baris meja, sel, tajuk, dan elemen lain berdasarkan hubungan antara elemen jadual dan elemen jadual. Sebagai contoh, "" akan memilih setiap baris di dalam jadual.

Bolehkah saya menggunakan pemilih keturunan dengan pemilih sejagat? table tr:nth-child(even) { /* 您的样式在此处 */ }

Ya, anda boleh menggunakan pemilih keturunan dengan pemilih sejagat. Pemilih sejagat sepadan dengan mana -mana elemen, jadi ia boleh digunakan untuk memilih semua keturunan elemen yang ditentukan. Sebagai contoh, "" akan memilih semua elemen yang keturunan

.

Bagaimana gaya gaya menggunakan pemilih keturunan? div * { /* 您的样式在此处 */ } div Anda boleh menggunakan pemilih keturunan untuk gaya bentuk dengan memilih elemen borang berdasarkan hubungan antara elemen bentuk dan elemen bentuk. Sebagai contoh, "" akan memilih semua medan input teks dalam borang.

Atas ialah kandungan terperinci Pemilih Keturunan (pemilih CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!