Tafsirkan prioritas CSS untuk Anda

Sebelum berbicara tentang prioritas CSS, kita perlu memahami apa itu CSS dan kegunaannya.

Pertama, mari kita beri penjelasan singkat tentang CSS: CSS adalah singkatan dari Cascading Style Sheets. Spesifikasinya mewakili tahap perkembangan unik dalam sejarah Internet. Saat ini bagi sobat yang bergerak di bidang produksi halaman web pasti sedikit yang belum pernah mendengar tentang CSS, karena kita sering kali perlu menggunakannya dalam proses pembuatan halaman web.

Kedua: Kita dapat mengatur tampilan dokumen yang kaya dan mudah dimodifikasi melalui CSS untuk mengurangi beban kerja pembuat halaman web, sehingga mengurangi biaya produksi dan pasca pemeliharaan.

Sebenarnya, tidak ada gunanya membicarakan apa itu CSS dan apa fungsinya. Saya yakin teman-teman yang terlibat dalam produksi halaman web kurang lebih sudah mengenalnya.

Lebih dekat ke rumah, mari masuk ke topik hari ini:

1. Apa prioritas CSS?

Yang disebut prioritas CSS mengacu pada urutan penguraian gaya CSS di browser.

2. Aturan prioritas CSS

Karena gaya memiliki prioritas, akan ada aturan untuk menyepakati prioritas ini, dan "aturan" inilah yang menjadi fokus artikel ini.

Kekhususan dalam style sheet menggambarkan bobot relatif dari aturan yang berbeda. Aturan dasarnya adalah:

1. Hitung jumlah atribut ID di pemilih.
2. Hitung jumlah atribut CLASS di pemilih.
3. Hitung jumlah nama tag HTML di pemilih.

Terakhir, tuliskan ketiga angka tersebut dengan urutan yang benar tanpa menambahkan spasi atau koma untuk mendapatkan angka tiga digit (css2.1 menggunakan 4 digit). (Perhatikan bahwa Anda perlu mengonversi angka tersebut menjadi angka yang lebih besar yang diakhiri dengan tiga digit). Daftar terakhir angka-angka yang sesuai dengan pemilih memudahkan untuk menentukan fitur mana dari angka yang lebih tinggi yang menggantikan fitur dari angka yang lebih rendah.

Misalnya:

1. Untuk setiap pemilih ID (#someid), tambahkan 0,1,0,0.
2. Tambahkan 0,0,1,0 ke setiap pemilih kelas (.someclass), setiap pemilih atribut (bentuk seperti [attr=value], dll.), dan setiap kelas semu (bentuk: hover, dll.).
3. Untuk setiap elemen atau elemen semu (:firstchild), dll., tambahkan 0,0,0,1.
4. Pemilih lainnya mencakup pemilih global *, ditambah 0,0,0,0. Ini sama saja dengan tidak menambahkannya, tetapi ini juga merupakan semacam kekhususan, yang akan dijelaskan nanti.

3. Daftar pemilih untuk klasifikasi fitur

Berikut adalah daftar penyeleksi yang diurutkan berdasarkan atribut:

Dilihat dari tabel di atas saja sepertinya sulit untuk dipahami. Berikut tabel lainnya:

Dari penjelasan di atas terlihat dengan mudah bahwa bobot tag HTML adalah 1, bobot CLASS adalah 10, bobot ID adalah 100, dan bobot warisan adalah 0 (akan dibahas nanti).

Tambahkan rangkaian angka sedikit demi sedikit sesuai aturan ini untuk mendapatkan bobot akhir, lalu bandingkan sedikit demi sedikit dari kiri ke kanan saat membandingkan dan memilih.

Masalah prioritas sebenarnya adalah masalah resolusi konflik. Ketika elemen (konten) yang sama dipilih oleh pemilih CSS, aturan CSS yang berbeda harus dipilih sesuai dengan prioritasnya.

Karena itu, kita harus membicarakan tentang pewarisan CSS.