Apakah pemilih hierarki dalam CSS? Bagaimana cara menggunakannya?

Dalam artikel sebelumnya " Terangkan pemilih asas CSS secara terperinci dan bercakap tentang keutamaan pemilih ", kami mempelajari tentang pemilih asas dalam CSS. Dalam artikel ini kita akan bercakap tentang pemilihan hierarki. harap ia membantu semua orang!

Pemilih Tahap CSS Pemilih Tahap ialah penggunaan pemilih yang disediakan berdasarkan hubungan antara pepohon nod HTML, jadi Jika anda mahu untuk mempelajari Pemilih Tahap dengan baik, anda mesti terlebih dahulu memahami rupa hubungan antara elemen HMTL. [Pembelajaran yang disyorkan: tutorial video css ]

Pertama lihat kod HTML berikut:

nbsp;html>

HTML测试代码

Kod di atas boleh dilukis ke dalam pepohon nod berikut, seperti ditunjukkan dalam rajah di bawah Menunjukkan

Sekarang mari kita lihat hubungan antara elemen HTML Terdapat tiga hubungan antara elemen dalam halaman HTML seperti yang ditunjukkan di bawah:

Hubungan antara ibu bapa dan anak : Dalam kod di atas, elemen di sebelah kiri ialah elemen induk bagi elemen

dan sebaliknya

Ia adalah elemen kanak-kanak Sudah tentu, terdapat banyak lagi struktur ibu bapa-anak. Hubungan antara saudara : Dalam kod kod di atas, elemen

dan

ialah elemen saudara, dan elemen dan Elemen juga adik beradik.

Hubungan antara nenek moyang dan keturunan : Dalam kod kod di atas, elemen

ialah unsur keturunan unsur , dan begitu juga sebaliknya Unsur Merupakan unsur nenek moyang bagi unsur

.

Jenis pemilih hierarki

Menurut tiga perhubungan antara elemen HTML, pemilih hierarki CSS menyediakan 4 berikut penggunaan disediakan:

Pemilih keturunan: Anggap elemen sebagai unsur nenek moyang dan cari semua unsur keturunan unsur ini.

Pemilih anak: Anggap elemen sebagai elemen induk dan cari semua elemen anak elemen ini.

Pemilih adik beradik bersebelahan: Gunakan elemen sebagai elemen sasaran dan cari elemen yang ditentukan seterusnya yang mempunyai elemen induk yang sama dengan elemen sasaran

Pemilih adik beradik biasa: Ia mengambil elemen tertentu sebagai elemen sasaran dan mencari sebarang elemen tertentu yang mempunyai elemen induk yang sama dengan elemen sasaran.

Pemilih

4 pemilih yang disediakan oleh CSS sepadan dengan empat penggunaan soalan berbilang pilihan peringkat CSS, seperti ditunjukkan di bawah

Ruang ( ) yang menunjukkan hubungan keturunan

Kurung sudut ( > ) yang menunjukkan hubungan ibu bapa-anak

Tanda tambah ( ) yang menunjukkan hubungan antara adik beradik yang bersebelahan

Tanda tilde ( ~ ) yang menunjukkan hubungan antara saudara

Dalam pembangunan web, dua yang pertama biasanya digunakan - pemilih keturunan dan pemilih anak .

Mari kita lihat sekeping kod dahulu:

使用CSS3层次选择器 * {margin:0;padding:0;} body {width: 300px; margin:0 auto;} div{margin:5px;padding:5px;border:1px solid #ccc;} 1 2 3 4 5 6 7 8 9 10

Pemilih keturunan

digunakan untuk pilih semua unsur turunan unsur tertentu, seperti HTML di atas, apakah kesan penggunaan gaya berikut?

body div { background-color: yellow; } Di sini, warna latar belakang unsur div keturunan unsur badan ditetapkan kepada kuning. Dalam erti kata lain, semua div diwarnakan kuning.

Pemilih sub

digunakan untuk memilih semua elemen anak peringkat pertama di bawah elemen tertentu (mungkin berbilang elemen) . Sebagai contoh, apakah kesan jika kita menggunakan pemilih dan gaya berikut?

body > div { background-color: red; } Selepas menetapkan seperti ini, elemen div peringkat pertama di bawah badan, berikut ialah elemen div dengan kandungan 1, 2, 3, 4 dan 7, tetapkan warna latar belakang kepada merah.

Pemilih adik beradik bersebelahan

digunakan untuk memilih elemen seterusnya dalam direktori elemen yang sama (atau beberapa elemen) elemen . Sebagai contoh, apakah kesannya selepas kami menggunakan tetapan gaya berikut di sini?

.active + div { background-color: green; } Di sini kami menetapkan nod adik beradik bersebelahan bagi pemilih .aktif, iaitu elemen div kedua dan menetapkan warna latar belakangnya kepada hijau.

Pemilih saudara sejagat

digunakan untuk memilih semua elemen berikut dalam direktori saudara bagi tanda elemen tertentu (atau tertentu) . Ia serupa dengan pemilih adik beradik bersebelahan dan perlu berada dalam elemen induk yang sama.

比如使用下面的代码，影响到的样式：

.active ~ div { background-color: pink; } 这里将类名为"active"的元素（这里为第一个div）的通用兄弟（这里是内容为2、3、4、7的div）设置了背景色为粉红色。

（学习视频分享： web前端入门 ）

Apakah pemilih hierarki dalam CSS? Bagaimana cara menggunakannya?

Artikel berkaitan