Pemilih CSS terutamanya termasuk pemilih asas, pemilih kombinasi, pemilih atribut, kelas pseudo dan pemilih pseudo-elemen. 1. Pemilih asas termasuk elemen, kelas, ID, dan pemilih wildcard, yang digunakan untuk tetapan gaya asas. 2. Pemilih gabungan mengandungi keturunan, elemen kanak -kanak, saudara bersebelahan, dan pemilih saudara umum, yang digunakan untuk mengendalikan hubungan struktur unsur. 3. Pemilih atribut sepadan dengan elemen berdasarkan atribut dan sesuai untuk kawalan elemen tertentu seperti bentuk dan pautan. 4. Pseudo-Class dan Pseudo-Element Selector digunakan untuk mengawal keadaan dan menjana kandungan, seperti: hover, :: sebelum, :: selepas, dan lain-lain, untuk meningkatkan interaksi dan kesan hiasan.

Pemilih CSS adalah bahagian utama pembangunan front-end, yang digunakan untuk memilih elemen dengan tepat di halaman dan dengan itu menggunakan gaya. Memahami pelbagai jenis pemilih boleh membantu anda menulis CSS dengan lebih cekap, mengurangkan kod berlebihan, dan mengawal keutamaan dan skop gaya.

1. Pemilih Asas: yang paling biasa digunakan dan paling asas

Pemilih jenis ini adalah yang paling biasa digunakan semasa menulis CSS setiap hari, termasuk:

• Pemilih elemen (seperti div , p ): Secara langsung pilih elemen berdasarkan nama tag HTML.
• Pemilih Kelas (seperti .class-name ): Pilih satu atau lebih elemen dengan nilai atribut kelas.
• Pemilih ID (seperti #id-name ): Pilih elemen tertentu dengan ID yang unik, perhatikan bahawa ID dalam halaman harus unik.
• Pemilih Wildcard ( * ): Padankan semua elemen, sering digunakan untuk menetapkan semula gaya lalai.

Pemilih ini mudah tetapi praktikal dan sesuai untuk tetapan gaya yang paling asas.

2. Pemilih Gabungan: Menggabungkan Pelbagai Pemilih untuk Padanan Lebih Tepat

Kadang -kadang kita perlu menggunakan gaya untuk elemen di bawah struktur tertentu, dan kemudian kita boleh menggunakan pemilih gabungan:

• Pemilih keturunan (seperti div p ): Pilih semua elemen p di dalam div, tidak kira sejauh mana sarangnya.
• Pemilih elemen kanak -kanak (seperti div > p ): Hanya elemen kanak -kanak langsung p div dipilih.
• Pemilih saudara bersebelahan (seperti h1 p ): Pilih elemen P sebaik sahaja selepas H1.
• Pemilih saudara Universal (seperti h1 ~ p ): Pilih semua elemen P pada tahap yang sama selepas H1.

Pemilih ini amat sesuai untuk situasi dalam susun atur di mana hubungan antara unsur -unsur perlu dikendalikan, seperti perenggan kandungan selepas tajuk artikel.

3. Pemilih atribut: Memadankan atribut elemen

Apabila anda ingin gaya mengikut atribut HTML, pemilih harta itu berguna:

• [type] : Pilih elemen dengan atribut Jenis.
• [type="text"] : Pilih elemen dengan jenis "teks".
• [class~="btn"] : Pilih elemen yang mengandungi "BTN" dalam kelas.
• [href*="example"] : Pilih pautan yang mengandungi "Contoh" dalam href.

Pemilih ini sangat berguna apabila berurusan dengan unsur -unsur dengan atribut tertentu, seperti bentuk, pautan, imej, dll.

4. Pseudo-Class dan Pseudo-Element Selector: Untuk kawalan gaya negeri dan kandungan

Daripada memilih nod DOM sebenar, pemilih jenis ini memilih keadaan tertentu atau menghasilkan kandungan:

• Kelas pseudo :

  • :hover : Status apabila tetikus dilegakan.
  • :active : Apabila elemen diaktifkan (seperti klik).
  • :focus : Apabila elemen mendapat tumpuan.
  • :nth-child(n) : Pilih elemen kanak-kanak n.

• Pseudo-Elements :

  • ::before dan ::after : Masukkan kandungan sebelum dan selepas elemen.
  • ::first-line : Pilih baris pertama blok teks.
  • ::placeholder : Pilih teks tempat di dalam kotak input.

Kelas pseudo kebanyakannya digunakan untuk mengubah keadaan interaktif, sementara unsur-unsur pseudo sering digunakan untuk menambah kandungan hiasan.

Pada dasarnya jenis biasa ini. Walaupun nampaknya banyak, banyak daripada mereka secara semulajadi digunakan dalam projek sebenar. Kuncinya adalah untuk memahami perbezaan dan senario yang terpakai di antara mereka, supaya CSS bertulis akan sama -sama dan berkesan.

Atas ialah kandungan terperinci Apakah pelbagai jenis pemilih CSS yang tersedia?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!