Apakah jenis pemilih perhubungan css3?

Terdapat 4 jenis pemilih hubungan css3: 1. Pemilih kemasukan "E F" memilih semua elemen F yang terkandung oleh elemen E 2. Pemilih turunan "E>F" memilih semua elemen yang E The Elemen anak langsung F; 3. Pemilih bersebelahan "E F" memilih elemen F serta-merta mengikut elemen E 4. Pemilih adik beradik "E~F".

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

Pemilih perhubungan dalam CSS3 terutamanya termasuk termasuk pemilih, pemilih keturunan, pemilih bersebelahan dan pemilih adik-beradik:

Sertakan pemilih Pemilih keturunan disambungkan dengan simbol "

" dan pemilih bersebelahan disambungkan dengan simbol " " menghubungkan >

Pemilih adik beradik disambungkan dengan simbol " "

Kami akan menerangkannya secara terperinci di bawah. Pemilih kemasukan (E F) ～

Pilih semua elemen F yang terkandung oleh elemen E, dipisahkan oleh ruang

Pemilih keturunan CSS3 (E>F) Pemilih keturunan digunakan terutamanya untuk memilih elemen anak peringkat pertama sesuatu elemen. Contohnya, jika anda ingin memilih elemen kuat yang hanya merupakan anak kepada elemen h1, anda boleh menulis: h1>

ul li{color:green;}

宝马 奔驰 奥迪 Yang berikut menggunakan kes untuk menunjukkan penggunaan pemilih keturunan (>), seperti yang ditunjukkan dalam rajah: Dalam kod di atas, yang kuat dalam baris 15 daripada kod Elemen ialah elemen anak bagi elemen h1, dan elemen kuat dalam baris ke-16 kod ialah elemen cucu elemen h1, jadi gaya yang ditetapkan dalam kod hanya sah untuk baris ke-15 kod.

Pemilih adik beradik CSS3 (E F)

nbsp;html>

CSS3子代选择器用法 h1 > strong { color: red; font-size: 20px; font-family: "微软雅黑"; }

这个 知识点 很 重要 PHP 中文网 欢迎你！

Pemilih ini menggunakan tanda tambah " " untuk memautkan dua pemilih sebelum dan selepas. Kedua-dua elemen dalam pemilih mempunyai induk yang sama, dan elemen kedua mesti segera mengikuti yang pertama.

Yang berikut menggunakan kes untuk menunjukkan penggunaan pemilih adik beradik bersebelahan.

Dalam kod di atas, baris 7 hingga 11 digunakan untuk mentakrifkan gaya bagi unsur adik beradik pertama h2 sejurus selepas elemen p. Ia boleh dilihat daripada struktur bahawa kedudukan elemen adik beradik pertama sejurus selepas elemen p ialah baris ke-17 kod, jadi kandungan teks baris ke-17 kod akan dipaparkan dalam gaya yang ditetapkan.

Seperti yang anda boleh lihat daripada gambar, hanya elemen h2 yang mengikuti elemen p mempunyai set gaya dalam kod yang digunakan.

nbsp;html>

CSS3紧邻兄弟选择器用法 p + h2{ color: green; font-family: "宋体"; font-size: 20px; }

《赠汪伦》 李白乘舟将欲行，

忽闻岸上踏歌声。 桃花潭水深千尺，

不及汪伦送我情。 Pemilih bersebelahan CSS3 (E~F)

Pemilih adik beradik biasa menggunakan "~" untuk memautkan dua pemilih sebelum dan selepas. Cari semua nod adik-beradik di belakang elemen yang ditentukan. Yang berikut menggunakan kes untuk menunjukkan penggunaan pemilih adik-beradik biasa, seperti yang ditunjukkan di bawah.

Seperti yang dapat dilihat daripada gambar, semua elemen adik beradik h2 selepas elemen p mempunyai gaya yang ditetapkan dalam kod yang digunakan.

(Mempelajari perkongsian video:

tutorial video css CSS3普通兄弟选择器~用法 p ~ h2{ color: pink; font-family: "微软雅黑"; font-size: 20px; } 《赠汪伦》 李白乘舟将欲行，

忽闻岸上踏歌声。 桃花潭水深千尺， 不及汪伦送我情。 )

Apakah jenis pemilih perhubungan css3?

Artikel berkaitan