Baru-baru ini saya melihat blog dengan penjelasan yang lebih baik tentang prioritas CSS. Meskipun ada artikel terkait di Internet, saya tetap memposting ulang untuk referensi Anda.
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.
Berikut kutipannya: [Dicetak ulang dari Blog GOVO]
Pembacaan prioritas harus dibagi menjadi "kelompok". Kelompok tersebut independen satu sama lain dan dibandingkan dari kiri ke kanan. Mereka muncul berkelompok, dipisahkan dengan koma.
Contoh Kode Sumber
[www.downcodes.com] pemilih( a , b , c , d )
bandingkan: ↑ , ↑ , ↑ , ↑
pemilih( a , b , c , d ), seperti yang ditunjukkan pada teks asli di w3c.org, dibagi menjadi empat grup a, b, c, d, semuanya bilangan bulat positif, dan defaultnya adalah 0, sesuai dengan pemilih yang berbeda bentuk struktur dan komposisi. Saat membandingkan prioritas antar penyeleksi, bandingkan satu dengan satu dari kiri ke kanan. Jika perbandingannya lebih besar, perbandingan dapat dihentikan.
Contoh Kode Sumber
[www.downcodes.com] 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 hasil)
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. Setiap orang dipersilakan untuk datang ke W3Cbbs.com untuk berdiskusi!
Berikut ini 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:
Contoh Kode Sumber
[www.downcodes.com] * 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 :firstchild), dll., 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.
contoh:
file css atau <style> didefinisikan sebagai berikut:
Contoh Kode Sumber
[www.downcodes.com] 1.h1 {warna: merah;}
/* Pemilih elemen, hasilnya 0,0,0,1 */
2. badan h1 {warna: hijau;}
/* Dua pemilih elemen, hasilnya 0,0,0,2 */
3. h2.grape {warna: ungu;}
/* Pemilih elemen dan pemilih Kelas, hasilnya 0,0,1,1*/
4. li#jawaban {warna: biru tua;}
/* Pemilih elemen, pemilih ID, hasilnya 0,1,0,1 */
Atribut gaya elemen didefinisikan sebagai berikut:
Contoh Kode Sumber
[www.downcodes.com] h1 {warna: biru;}
/* Didefinisikan di halaman, pemilih elemen, hasilnya 1,0,0,1*/
Catatan: Semua angka ditumpangkan di sini, (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1 ,0,0,1)=(1,1,1,6)
Sejak itu, warna elemen h1 menjadi biru.
Melihat:
1. Style yang dinyatakan !important mempunyai prioritas tertinggi. Jika ada konflik maka akan dihitung kembali.
2. Jika prioritasnya sama, pilih gaya yang muncul terakhir.
3. Gaya yang diwariskan memiliki prioritas paling rendah.
