Rumah > Artikel > hujung hadapan web > pemilih css yang merupakan pemilih lanjutan
pemilih css yang merupakan pemilih lanjutan
- 百草asal
- 2023-10-07 14:59:401237semak imbas
Pemilih lanjutan dalam pemilih CSS termasuk pemilih keturunan, pemilih elemen anak, pemilih adik beradik bersebelahan, pemilih adik beradik universal, pemilih atribut, pemilih kelas, pemilih ID, pemilih kelas pseudo dan Pemilih elemen pseudo dll. Pengenalan terperinci: 1. Pemilih turunan menggunakan pemilih yang dipisahkan oleh ruang untuk memilih unsur turunan unsur 2. Pemilih elemen anak menggunakan pemilih yang dipisahkan dengan tanda yang lebih besar untuk memilih unsur anak langsung bagi sesuatu elemen; Pemilih adik beradik bersebelahan menggunakan pemilih yang dipisahkan dengan tanda tambah untuk memilih elemen adik beradik pertama serta-merta mengikuti elemen, dan seterusnya.
Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.
Terdapat beberapa pemilih dalam pemilih CSS yang dipanggil pemilih lanjutan, yang menyediakan keupayaan pemilihan yang lebih berkuasa dan fleksibel serta boleh memilih berdasarkan keadaan seperti perhubungan, status dan kedudukan elemen. Berikut ialah pemilih lanjutan biasa dalam CSS:
1 Pemilih Keturunan: Gunakan pemilih yang dipisahkan ruang untuk memilih elemen turunan bagi sesuatu elemen. Sebagai contoh, `div p` bermaksud memilih semua elemen `
` yang merupakan keturunan unsur `
2. Pemilih Anak: Gunakan pemilih yang dipisahkan oleh tanda yang lebih besar daripada (>) untuk memilih elemen anak langsung bagi sesuatu elemen. Contohnya, `div > p` bermaksud memilih semua elemen `
` yang merupakan anak langsung unsur `
3. Pemilih Adik Beradik Bersebelahan: Pemilih yang dipisahkan dengan tanda tambah (+), menunjukkan bahawa elemen adik beradik pertama serta-merta mengikuti elemen dipilih. Contohnya, `h1 + p` bermaksud memilih elemen `
` yang pertama serta-merta selepas elemen `
`.
4. Pemilih Adik Beradik Umum: Pemilih yang dipisahkan oleh tilde (~) untuk memilih semua elemen adik beradik selepas elemen. Contohnya, `h1 ~ p` bermaksud memilih semua elemen `
` selepas elemen `
`.
5. Pemilih Atribut: Gunakan kurungan segi empat sama ([]) untuk memilih elemen dengan atribut tertentu. Contohnya, `input[type="text"]` bermaksud memilih semua elemen `` yang nilai atribut `type`nya ialah "teks".
6 Pemilih Kelas: Gunakan pemilih bermula dengan noktah (.) untuk memilih elemen dengan nama kelas yang ditentukan. Contohnya, `.red` bermaksud memilih semua elemen dengan nama kelas "merah".
7 Pemilih ID: Gunakan pemilih bermula dengan tanda paun (#) untuk memilih elemen dengan ID yang ditentukan. Contohnya, `#header` bermaksud memilih elemen dengan ID "header".
8. Pemilih kelas Pseudo: Gunakan pemilih bermula dengan titik bertindih (:) untuk memilih elemen yang memenuhi status atau syarat tertentu. Contohnya, `:hover` menunjukkan keadaan pemilihan apabila tetikus melayang di atas elemen.
9. Pemilih unsur Pseudo: Gunakan pemilih bermula dengan tanda bertindih dua (::) untuk memilih bahagian tertentu elemen. Contohnya, `::before` mewakili kandungan yang disisipkan sebelum elemen yang dipilih.
Yang di atas ialah pemilih lanjutan biasa dalam CSS Mereka menyediakan lebih banyak fleksibiliti dan keupayaan pemilihan, serta boleh memilih dan menggayakan elemen dalam halaman web berdasarkan keadaan seperti perhubungan, status dan kedudukan mereka. Dengan menggunakan pemilih lanjutan ini secara rasional, kami boleh mencapai kesan penggayaan yang lebih tepat dan pelbagai, meningkatkan interaktiviti dan daya tarikan visual halaman web.
Atas ialah kandungan terperinci pemilih css yang merupakan pemilih lanjutan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!