Apakah pemilih hierarki css3?

Pemilih hierarki CSS3 termasuk: 1. Pemilih keturunan "E F", yang memilih semua elemen F turunan bagi elemen E 2. Pemilih elemen anak "E>F", yang memilih semua elemen di bawah elemen E . Elemen anak F; 3. Pemilih elemen adik beradik bersebelahan "E F" memilih elemen F sejurus selepas elemen E 4. Pemilih adik beradik "E~F".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Pemilih keturunan (E F)

Pemilih keturunan juga dipanggil pemilih yang mengandungi, dan fungsinya adalah untuk memilih elemen Unsur turunan, seperti sebagai: E F, dengan E ialah unsur nenek moyang dan F ialah unsur keturunan Maksudnya ialah semua unsur keturunan F bagi unsur E dipilih. Di sini, F akan dipilih sama ada elemen anak, elemen cucu atau hubungan yang lebih mendalam bagi elemen E Dalam erti kata lain, tidak kira berapa tahap perhubungan F dalam E, ia akan dipilih: Pelayar.

.demo li {color: blue;}

Di atas bermakna semua elemen li dalam div.demo dipilih spa

Pemilih keturunan disokong oleh semua penyemak imbas. 3d

Pemilih elemen kanak-kanak (E>F)

Pemilih elemen kanak-kanak hanya boleh memilih elemen anak bagi elemen tertentu, dengan E ialah elemen induk dan F ialah elemen anak E>F bermakna semua elemen anak F di bawah elemen E dipilih. Ini berbeza daripada pemilih keturunan (EF), di mana F ialah unsur keturunan E, dan pemilih unsur anak E > Kod pada blog

ul > li {
background: green;
color: yellow;
}

menunjukkan bahawa semua sub-elemen li di bawah ul dipilih. Contohnya: bfc

IE6 tidak menyokong pemilih elemen anak. saya

Pemilih unsur adik beradik bersebelahan (E F)

Pemilih adik beradik bersebelahan boleh memilih elemen sejurus selepas elemen lain, dan mereka mempunyai elemen induk yang sama Dalam erti kata lain, kedua-dua elemen EF mempunyai elemen induk yang sama, dan elemen F berada dalam elemen E, dan bersebelahan dengan. itu, jadi kita boleh menggunakan pemilih elemen adik beradik bersebelahan untuk memilih elemen F. demo

li + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

Kod di atas menunjukkan bahawa unsur li bersebelahan li dipilih Kami mempunyai sepuluh li di sini, jadi kod di atas memilih li ke-2 hingga ke-10 li , sembilan kesemuanya, sila lihat kesannya: db

Disebabkan li li di atas, li kedua ialah elemen bersebelahan dengan yang pertama li, dan li kedua ialah elemen bersebelahan li pertama Tiga ialah elemen bersebelahan kedua, jadi yang ketiga juga dipilih, dan seterusnya, jadi sembilan li seterusnya semuanya dipilih cara, kita mungkin memahaminya dengan lebih baik kepada li.aktif Hanya terdapat satu unsur . Seperti yang ditunjukkan dalam gambar: di

.active + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

IE6 tidak menyokong pemilih ini

Pemilih saudara sejagat (E ~ F)

Pemilih elemen saudara sejagat ialah pemilih baharu yang ditambahkan pada CSS3 Semua elemen adik-beradik di belakang unsur akan dipilih Ia juga serupa dengan unsur adik beradik yang bersebelahan dan perlu berada dalam unsur induk yang sama Dalam erti kata lain, unsur E dan F tergolong dalam unsur induk yang sama, dan unsur F adalah selepas Elemen E , maka pemilih E ~ F akan memilih elemen F di belakang semua elemen E. Contohnya, kod berikut: Maksud kod di atas ialah semua elemen adik beradik li di belakang elemen li.aktif dipilih, seperti yang ditunjukkan dalam rajah:

.active ~ li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

Pemilih saudara sejagat sangat serupa dengan pemilih saudara bersebelahan, kecuali pemilih saudara bersebelahan hanya memilih unsur -unsur berikut yang bersebelahan dengan elemen (hanya satu elemen yang dipilih); memilih Pemilih elemen memilih elemen adik beradik yang bersebelahan dengan elemen Mungkin mengelirukan untuk menyebutnya seperti ini.

IE6 tidak menyokong penggunaan pemilih ini.

(Belajar perkongsian video: tutorial video css)

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