Bagaimanakah Saya Boleh Menggabungkan Pemilih Kelas dan ID dalam CSS untuk Menyasarkan Elemen HTML Tertentu?

Menggabungkan Kelas dan ID dalam Pemilih CSS

Apabila menggayakan elemen HTML, adalah perkara biasa untuk menggunakan kedua-dua kelas dan ID untuk menyasarkan elemen tertentu. Dalam sesetengah kes, anda mungkin perlu menggabungkan kedua-dua kriteria. Begini cara untuk mencapainya:

Elemen Pertanyaan dengan Kedua-dua ID dan Kelas

Pertimbangkan HTML berikut:

<div>
<p>Untuk menggayakan elemen ini sedemikian bahawa ia mempunyai kedua-dua kelas "sectionA" dan ID "kandungan", gunakan CSS berikut pemilih:</p>
<pre class="brush:php;toolbar:false">div#content.sectionA

Dalam pemilih ini, simbol "#" mendahului ID, manakala "." simbol mendahului kelas. Ini memastikan bahawa peraturan CSS hanya digunakan pada elemen yang memenuhi kedua-dua kriteria.

Nota Tambahan

Ingat bahawa susunan kelas dan ID dalam pemilih adalah penting. Jika anda menulis ".sectionA#content", ia akan memilih elemen dengan kelas "sectionA" dan sebarang ID, tidak semestinya "kandungan."

Pendekatan Ganti

Menggunakan teknik di atas, anda boleh menggabungkan berbilang kelas atau berbilang ID. Walau bagaimanapun, terdapat pendekatan alternatif untuk mengelakkan pemilih panjang:

1. Kelas Concat: Gabungkan nama kelas seperti "content-sectionA" atau "sectionA-content" untuk mencipta kelas yang unik. Ini memudahkan pemilih kepada ".content-sectionA" atau ".sectionA-content."
2. Gunakan Pemilih Kanak-kanak: Jika kelas digunakan pada elemen kanak-kanak, anda boleh menggunakan "> ;" simbol dalam pemilih, contohnya: "div#content > p.sectionA."