Penjelasan rinci tentang pengucapan prioritas CSS. Prioritas CSS mencakup empat level (pemilih dalam teks, pemilih ID, pemilih kelas, pemilih elemen) dan jumlah kemunculan setiap level. Prioritas CSS dihitung berdasarkan jumlah kemunculan keempat level tersebut.
Pembacaan prioritas harus dibagi menjadi "kelompok". Kelompok tersebut independen satu sama lain dan dibandingkan dari kiri ke kanan. Mereka muncul berkelompok, dipisahkan dengan koma.
pemilih( a , b , c , d )
bandingkan: ↑ , ↑ , ↑ , ↑
pemilih( a , b , c , d )
Seperti yang ditunjukkan dalam teks asli di w3c.org, ini dibagi menjadi empat grup a, b, c, dan d, yang semuanya merupakan bilangan bulat positif. Standarnya adalah 0, yang sesuai dengan struktur pemilih dan bentuk komposisi yang berbeda. Saat membandingkan prioritas antar penyeleksi, bandingkan satu dengan satu dari kiri ke kanan. Jika perbandingannya lebih besar, perbandingan dapat dihentikan.
li.red.level {} /* a=0 b=0 c=2 d=1 -> spesifisitas = 0 , 0 , 2 , 1 */
/*bandingkan ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> kekhususan = 0 , 0 , 1 , 1 */
/*bandingkan ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> kekhususan = 0 , 0 , 1 , 3 */
/*bandingkan ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> kekhususan = 0 , 1 , 0 , 0 */
/*bandingkan ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> spesifisitas = 1 , 0 , 0 , 0 */
(Pada tabel di atas, ↑ berarti masih diperlukan perbandingan, dan √ berarti hasil telah diperoleh dari sini.
Selanjutnya asalkan ditulis dengan benar, struktur selector hanya dapat diketahui secara kasar dari prioritasnya saja, seperti:
1,0,0,0 menunjukkan gaya dalam elemen;
0,2,1,1 mewakili pemilih yang terdiri dari dua pemilih ID, pemilih kelas atau kelas semu atau atribut, dan pemilih elemen.
Detail aturan prioritas CSS:
Setelah mengoreksi pengucapannya, kita dapat mulai membicarakan aturan detailnya:
Nilai grup a hanya akan menjadi 1 ketika CSS ditulis ke dalam atribut style, jika tidak maka akan menjadi 0. Pernyataan style yang ditulis ke dalam style sebenarnya bukan selector, jadi nilai grup b, c, dan d di sini semuanya 0, dan hanya yang sebenarnya. Hanya pemilih yang akan memiliki nilai grup b, c, d.
Nilai grup b ditentukan oleh ID pemilih #ID, berapa banyak ID pemilih yang ada, dan nilai grup akan diakumulasikan;
Kelompok nilai c ditentukan oleh kelas, kelas semu dan pemilih atribut, dan kelompok nilai akan diakumulasikan;
Kelompok nilai d ditentukan oleh nama elemen, yaitu pemilih elemen, dan kelompok nilai akan diakumulasikan;
Perhatikan bahwa keempat kumpulan nilai ini sesuai dengan jenis penyeleksi yang berbeda dan tidak saling mempengaruhi. Mereka dibandingkan sesuai dengan aturan pembacaan.
!penting, prinsip kedekatan dan pewarisan tidak dibahas di sini, dan tidak ada kode contoh. Semua orang dipersilakan datang ke webjx.com untuk berdiskusi!
Berikut beberapa contohnya: Masalah prioritas CSS Prioritas CSS mencakup empat level (pemilih teks, pemilih ID, pemilih kelas, pemilih elemen) dan jumlah kemunculan setiap level. Prioritas CSS dihitung berdasarkan jumlah kemunculan keempat level tersebut.
Aturan penghitungan prioritas CSS adalah sebagai berikut:
* Gaya yang ditentukan di halaman, tambahkan 1,0,0,0
* Untuk setiap pemilih ID (seperti #id), tambahkan 0,1,0,0
* Tambahkan 0,0,1,0 ke setiap pemilih Kelas (seperti .class), setiap pemilih atribut (seperti [atribut=]), dan setiap kelas semu (seperti: hover)
* Untuk setiap pemilih elemen (seperti p) atau pemilih elemen semu (seperti: anak pertama), tambahkan 0,0,0,1
Kemudian, tambahkan keempat angka ini secara terpisah untuk mendapatkan nilai dari setiap prioritas yang ditentukan CSS.
Kemudian bandingkan ukurannya sedikit demi sedikit dari kiri ke kanan. Style CSS dengan angka yang lebih besar akan memiliki prioritas lebih tinggi.