Apakah pemilih keturunan dalam css?

Pemilih keturunan css termasuk: 1. Pemilih keturunan yang dipisahkan oleh ruang akan memilih semua elemen keturunan semua elemen yang sepadan dengan elemen induk dan gaya boleh ditetapkan untuk semua elemen keturunan 2. Pemilih keturunan yang dipisahkan oleh > unsur keturunan langsung unsur yang sepadan dengan unsur induk boleh menetapkan gaya untuk unsur turunan langsung 3. Pemilih turunan unsur pseudo akan memilih semua unsur turunan unsur yang sepadan dengan unsur induk, termasuk unsur pseudo, dan boleh menjadi turunan unsur pseudo; . Elemen digayakan dan banyak lagi.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer Dell G3.

Pemilih keturunan CSS ialah pemilih yang digunakan untuk memilih semua elemen keturunan unsur. Pemilih keturunan terdiri daripada dua pemilih, pemilih pertama digunakan untuk memilih elemen induk, dan pemilih kedua digunakan untuk memilih elemen keturunan. Pemilih keturunan boleh dipisahkan dengan ruang atau simbol >

Pemilih keturunan CSS datang dalam jenis berikut:

Pemilih keturunan yang dibatasi ruang:

Menggunakan pemilih keturunan yang dibatasi ruang memilih semua elemen keturunan semua elemen yang sepadan dengan elemen induk. Sebagai contoh, rentang div pemilih memilih semua elemen rentang yang sepadan dengan mana-mana elemen div.

>-pemilih keturunan yang dipisahkan:

Menggunakan pemilih keturunan yang dipisahkan > akan memilih semua unsur turunan langsung unsur yang sepadan dengan unsur induk. Contohnya, div pemilih > span memilih semua elemen span yang merupakan anak langsung unsur yang sepadan dengan elemen div.

Pemilih turunan unsur pseudo:

Pemilih turunan unsur pseudo memilih semua unsur turunan unsur yang sepadan dengan unsur induk, termasuk unsur pseudo. Contohnya, pemilih div:after span memilih semua elemen span yang sepadan dengan elemen div, termasuk elemen div selepas pseudo-element.

Berikut ialah contoh penggunaan pemilih keturunan CSS:

div {
  background-color: red;
}
div span {
  color: blue;
}
> 号分隔后代选择器：
div > span {
  color: green;
}
伪元素后代选择器：
div:after span {
  color: yellow;
}

Kod ini menetapkan warna latar belakang semua elemen div kepada merah dan warna semua elemen rentang semua elemen div kepada biru. Menggunakan > mengehadkan pemilih keturunan untuk menetapkan warna semua elemen span yang mengarahkan anak unsur div kepada hijau. Gunakan pemilih turunan unsur pseudo untuk menetapkan warna elemen rentang semua elemen div selepas unsur pseudo kepada kuning.

Dalam aplikasi praktikal, pemilih keturunan CSS boleh digunakan dalam senario berikut:

Tetapkan gaya untuk semua elemen keturunan: Anda boleh menggunakan pemilih keturunan yang dibataskan ruang untuk menetapkan gaya untuk semua elemen keturunan. Sebagai contoh, anda boleh menggunakan pemilih span div untuk menggayakan semua elemen span untuk semua elemen div.

Tetapkan gaya untuk unsur keturunan langsung: Anda boleh menggunakan tanda > untuk memisahkan pemilih keturunan untuk menetapkan gaya untuk unsur keturunan langsung. Contohnya, anda boleh menggunakan div pemilih > untuk menggayakan semua elemen span yang merupakan anak langsung unsur div.

Menggayakan elemen keturunan unsur pseudo: Anda boleh menggunakan pemilih turunan unsur pseudo untuk menggayakan unsur keturunan unsur pseudo. Sebagai contoh, anda boleh menggunakan pemilih div:after span untuk menggayakan elemen span elemen pseudo selepas semua elemen div.

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