Masalah prioritas sebenarnya adalah masalah resolusi konflik. Ketika elemen (atau konten) yang sama dipilih oleh pemilih CSS, aturan CSS yang berbeda harus dipilih berdasarkan prioritas.
Yang pertama adalah kekhususan aturan CSS. CSS2.1 memiliki seperangkat metode perhitungan untuk kekhususan, yang diwakili oleh string angka empat digit (CSS2 adalah tiga digit). khusus aturannya. Dalam prioritas Ini akan lebih menguntungkan ketika membuat penilaian. Mengenai penghitungan spesifisitas spesifik, terdapat aturan umum berikut untuk penjumlahan numerik dalam berbagai situasi:
untuk setiap pemilih ID (#someid), tambahkan 0,1,0,0.
Setiap pemilih kelas (.someclass), setiap pemilih atribut (dibentuk seperti [attr=""], dll.), setiap kelas semu (dibentuk seperti: hover, dll.) menambahkan 0, 0, 1, 0
ke setiap elemen atau Elemen semu (:firstchild), dll., tambahkan 0,0,0,1
. Pemilih lainnya menyertakan pemilih global *, tambahkan 0,0,0,0. Ini sama saja dengan tidak menambahkannya, tetapi ini juga merupakan semacam kekhususan, yang akan dijelaskan nanti.
Menurut aturan ini, rangkaian angka ditambahkan sedikit demi sedikit untuk mendapatkan kekhususan akhir yang dihitung, dan kemudian dibandingkan sedikit demi sedikit secara berurutan dari kiri ke kanan saat membandingkan dan memilih.
Mari kita berikan beberapa contoh:
h1 {warna: merah;}
/* Hanya ada satu bonus elemen biasa, hasilnya 0,0,0,1 */
badan h1 {warna: hijau;}
/* Tambahkan dua elemen biasa, hasilnya 0,0,0,2 */
--Yang terakhir menang
h2.grape {warna: ungu;}
/* Elemen biasa dan pemilih kelas ditambahkan, dan hasilnya adalah 0,0,1,1*/
h2 {warna: perak;}
/*Elemen biasa, hasilnya 0,0,0,1 */
--Yang pertama menang
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* 7 elemen biasa, satu pemilih atribut, dua pemilih lainnya, hasilnya 0,0,1,7 */
li#jawaban {warna: biru tua;}
/* Pemilih ID, pemilih normal, hasilnya 0,1,0,1 */
--Yang terakhir menang
Selain kekhususan, ada beberapa
gaya lain dalam teks aturan yang memiliki prioritas 1,0,0,0, sehingga selalu lebih tinggi daripada definisi eksternal. Di sini, gaya dalam teks mengacu pada gaya yang terlihat seperti <div style="color: red">blah</div>, sedangkan definisi eksternal mengacu pada aturan yang ditentukan melalui tag <link> atau <style>.
Ada aturan deklarasi yang penting di atas segalanya.
Jika deklarasi !important bertentangan, prioritasnya akan dibandingkan.
Jika prioritasnya sama, prioritasnya akan ditentukan sesuai urutan kemunculannya di kode sumber, dengan prioritas berikutnya.
Gaya yang diturunkan dari warisan tidak memiliki perhitungan kekhususan, yang lebih rendah dari semua aturan lainnya (seperti yang ditentukan oleh pemilih global *).
Mengenai gaya eksternal yang dimuat melalui @import, karena @import harus muncul sebelum semua definisi aturan lainnya (jika tidak, browser harus mengabaikannya), maka menurut prinsip siapa yang datang lebih dulu dilayani, umumnya konflik prioritas akan terjadi.
Saya perlu menyebutkan di sini bahwa IE dapat mengenali @import di posisi yang salah, tetapi di mana pun @import berada, IE menganggapnya sebelum semua definisi aturan lainnya, yang dapat menyebabkan beberapa kesalahpahaman.
Oleh karena itu, walaupun permasalahan prioritasnya terkesan sederhana, namun di baliknya terdapat mekanisme yang cukup rumit sehingga memerlukan perhatian lebih.