Bagaimana Pemilih CSS Menentukan Keutamaan?

Keutamaan Pemilih CSS

Apabila menggayakan elemen HTML dengan CSS, berbilang pemilih mungkin boleh digunakan. Dalam senario sedemikian, penyemak imbas mengikut peraturan khusus untuk menentukan pemilih mana yang diutamakan. Artikel ini meneroka keutamaan dalam kalangan pemilih CSS.

Kekhususan

Kekhususan pemilih menentukan keutamaannya berbanding yang lain. Kekhususan dikira berdasarkan kriteria berikut:

• Peraturan Gaya Sebaris (tertinggi): Gaya yang ditakrifkan dalam atribut gaya elemen HTML.
• ID Pemilih (tinggi): Memilih elemen dengan ID uniknya.
• Pemilih Kelas (sederhana): Memilih elemen dengan kelas tertentu.
• Pemilih Elemen (rendah): Memilih elemen mengikut nama teg HTMLnya.

Pengiraan Kekhususan

Kekhususan dikira dengan memberikan nilai berangka seperti berikut:

• Peraturan Gaya Sebaris: 1000
• Pemilih ID: 100
• Pemilih Kelas: 10
• Pemilih Elemen: 1

Dengan menambahkan nilai untuk setiap kriteria yang berkaitan, kekhususan ditentukan.

Keutamaan

Berdasarkan kekhususan, peraturan keutamaan berikut digunakan:

• !Peraturan penting dan Peraturan Gaya Sebaris: Pemilih ini mempunyai keutamaan tertinggi.
• Kekhususan: Jika dua pemilih mempunyai kekhususan yang berbeza, peraturan dengan kekhususan yang lebih tinggi menang. Contohnya, pemilih ID (#id) mempunyai keutamaan yang lebih tinggi daripada pemilih kelas (.classname).
• Perintah Pengisytiharan: Jika berbilang pemilih mempunyai kekhususan yang sama, peraturan diisytiharkan kemudian dalam fail CSS diutamakan.

Contoh

Pertimbangkan peraturan CSS berikut:

<code class="css">p {
  color: red;
}

#content p {
  color: blue;
}</code>

Dalam contoh ini, # pemilih p kandungan mempunyai kekhususan yang lebih tinggi daripada pemilih p kerana ia termasuk pemilih ID. Oleh itu, untuk mana-mana elemen dalam elemen #content, sifat warna akan ditetapkan kepada biru, mengatasi warna merah lalai.

Memahami keutamaan dalam kalangan pemilih CSS adalah penting semasa membuat atau menyahpepijat kod CSS kompleks. Dengan mematuhi peraturan ini, anda boleh memastikan gaya yang diingini digunakan pada elemen yang sesuai.

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