Bagaimanakah Saya Boleh Menggabungkan Pemilih Kelas dan ID dalam CSS untuk Menggayakan Elemen HTML Khusus?

Menggabungkan Kelas dan ID dalam Pemilih CSS

Apabila menggunakan gaya pada elemen HTML, selalunya perlu untuk menyasarkan elemen dengan gabungan kelas dan ID. Pertanyaan ini meneroka kaedah untuk mencapai ini dan implikasinya dalam senario yang berbeza.

Senario

Pertimbangkan elemen div HTML berikut:

<div>
<p><strong>Soalan</strong></p>
<p>Adakah cara untuk menyatakan peraturan gaya berikut menggunakan pemilih gabungan: "Div dengan></p>
<p><strong>Jawapan</strong></p>
<p>Ya, mungkin menggunakan sintaks berikut:</p>
<pre class="brush:php;toolbar:false">div#content.myClass

Pemilih ini sepadan dengan elemen yang mempunyai kedua-dua ID "kandungan" dan "myClass" kelas.

Nota Tambahan

• Berbilang Kelas: Anda boleh menggabungkan berbilang kelas menggunakan noktah (".") dengan cara yang sama . Contohnya:

div#content.myClass.aSecondClass

• Nama Teg Kemasukan: Walaupun tidak perlu, anda boleh memasukkan nama teg dalam pemilih untuk kejelasan Walau bagaimanapun, ia boleh menjejaskan prestasi dalam penyemak imbas tertentu.

div#content.myClass

• Prestasi. Pertimbangan: Apabila menyasarkan elemen dengan pemilih gabungan, sebaiknya tinggalkan nama teg untuk menambah baik prestasi.

#content.myClass

Dengan memahami teknik ini, anda boleh menggunakan gaya dengan berkesan pada elemen yang sepadan dengan kombinasi kriteria tertentu, meningkatkan kefleksibelan dan kebolehselenggaraan kod CSS anda.