Bagaimana CSS Menyelesaikan Pemilih Bercanggah: Panduan Keutamaan

Keutamaan Pemilih CSS: Menyelesaikan Konflik

Dalam bidang CSS, adalah perkara biasa untuk mempunyai berbilang pemilih yang menyasarkan elemen yang sama. Apabila ini berlaku, persoalan timbul: Pemilih mana yang diutamakan? Di sinilah konsep keutamaan pemilih dimainkan.

Peraturan Keutamaan

Spesifikasi CSS mentakrifkan set peraturan yang jelas untuk menentukan keutamaan pemilih:

1. !Peraturan penting dan Gaya Sebaris Mengatasi Semua: Peraturan yang diisytiharkan dengan bendera !penting dan gaya sebaris mempunyai keutamaan tertinggi.
2. Kekhususan: lebih spesifik pemilih, lebih tinggi keutamaannya. Kekhususan dikira berdasarkan bilangan ID, kelas dan nama elemen yang digunakan dalam pemilih. Sebagai contoh, #id mempunyai kekhususan yang lebih tinggi daripada .classname, yang mempunyai kekhususan yang lebih tinggi daripada tagname.
3. Perintah Pengisytiharan: Jika dua pemilih mempunyai kekhususan yang sama, yang diisytiharkan terakhir dalam stylesheet menang.

Contoh

Pertimbangkan contoh berikut:

<code class="css">#my-id {
  color: red;
}

.my-class {
  color: blue; /* !important */
}</code>

Dalam senario ini, pemilih ".my-class " mempunyai keutamaan tertinggi kerana bendera !penting. Akibatnya, elemen dengan ID "id-saya" akan mempunyai warnanya ditetapkan kepada biru, mengatasi peraturan yang diisytiharkan dalam pemilih #my-id.

Atas ialah kandungan terperinci Bagaimana CSS Menyelesaikan Pemilih Bercanggah: Panduan Keutamaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!