Kekhususan CSS adalah mekanisme teras yang menentukan keutamaan gaya, dan menentukan peraturan mana yang berkuatkuasa melalui pengiraan berat pemilih. Gaya inline menjaringkan 1000 mata, pemilih ID menjaringkan 100 mata setiap satu, kelas, atribut, dan kelas pseudo menjaringkan 10 mata setiap satu, elemen dan pseudo-elemen skor 1 mata setiap satu; Skor kategori yang berbeza tidak boleh dibawa; Sebagai contoh, sepuluh pemilih kelas (100 mata) masih lebih rendah daripada satu ID (100 mata). Penyalahgunaan! Penting harus dielakkan, memahami perintah warisan dan lata, dan menganalisis konflik gaya dengan alat penyemak imbas.

Kekhususan CSS adalah salah satu mekanisme teras yang mengawal keutamaan gaya. Ringkasnya, apabila banyak peraturan CSS digunakan untuk elemen yang sama, penyemak imbas akan menentukan peraturan mana yang sebenarnya berkuatkuasa dengan mengira "kekhususan" setiap peraturan.

Apakah kekhususan CSS?

Kekhususan boleh difahami sebagai sistem "berat". Setiap pemilih mempunyai skor khusus, yang merangkumi menentukan peraturan gaya mana yang akan digunakan pada akhirnya.

Sebagai contoh: jika anda menulis dua peraturan yang berfungsi pada tag <p></p> , salah satunya ialah p { color: red; } dan yang lain adalah .highlight { color: blue; } , maka kelas .highlight dengan kekhususan yang lebih tinggi akan memilih untuk menang, dan warna teks akan menjadi biru.

Bagaimana cara mengira kekhususan?

Kekhususan terdiri daripada empat jenis "tong", dari tinggi ke rendah:

• Gaya Inline (seperti style="color:red" ) → Setiap Gaya Dalam Talian Skor 1000 mata
• Pemilih ID (seperti #main ) → Setiap ID skor 100 mata
• Pemilih kelas, atribut dan kelas pseudo (seperti .class , [type="text"] , :hover ) → Setiap skor 10 mata
• Pemilih elemen dan elemen pseudo (seperti div , ::before ) → setiap skor 1 mata

Contohnya:

 / * .nav #Menu → 10 100 = 110 */
#Menu .NAV {
  warna: hijau;
}

dan:

 / * div .header: hover → 1 10 10 = 21 */
div.header: hover {
  Latar Belakang: Kuning;
}

Nota: Skor dalam kategori yang berbeza tidak boleh dibawa. Sebagai contoh, jumlah skor (100) sepuluh pemilih kelas tidak sebaik ID (100) kerana mereka tergolong dalam "digit" yang berbeza.

Soalan Lazim dan Cadangan

Elakkan penyalahgunaan !important

Walaupun !important boleh memaksa menimpa gaya lain, ia adalah "cara kejam" untuk memusnahkan logik cascade dan akan merumitkan debugging. Kecuali dinyatakan sebaliknya, cuba untuk tidak menggunakannya atau gunakannya kurang.

Memahami warisan dan perintah cascade

Tidak semua gaya akan diwarisi, dan juga gaya yang ditulis dalam perkara berikut akan berkuatkuasa. Memahami susunan CSS (sumber, kepentingan, kekhususan, perintah) dapat membantu anda mengawal tingkah laku gaya yang lebih baik.

Gunakan alat untuk membantu dengan analisis

Pemaju penyemak imbas moden dapat melihat apa peraturan setiap elemen sepadan dan kekhususan mereka. Ini sangat membantu dalam konflik gaya penyelesaian masalah.

Mari kita meringkaskan

Memahami kekhususan CSS tidak sukar, kunci adalah untuk ingat bahawa ia dikira berdasarkan jenis pemilih, bukan pesanan kod atau kedudukan stylesheet. Selagi anda memahami berat pelbagai pemilih, anda boleh menulis peraturan gaya yang lebih jelas dan lebih mudah dikawal.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Memahami kekhususan CSS dan bagaimana ia dikira. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!