Hitung specificity CSS dan lihat aturan mana yang menang
Tempel selector untuk menghitung specificity-nya, atau tempel CSS dan elemen untuk melihat aturan yang berlaku.
- Berjalan di perangkat Anda
- Tanpa daftar
- Bisa dipakai luring setelah dikunjungi
Gaya default browser dan stylesheet lain tidak disertakan. Tidak ada yang dikirim ke mana pun.
| Selektor | Specificity | Bobot | Konteks |
|---|
| Aturan | Nilai | Specificity | Layer | Hasil |
|---|
Cara cara mencari aturan CSS yang menang
- Pilih mode: hitung selector, atau cari aturan yang menang.
- Tempel selector, atau CSS, HTML dan properti.
- Baca skornya, atau pemenangnya dan alasan setiap aturan lain kalah.
Pertanyaan
Bagaimana specificity dihitung?
Setiap id dihitung 1,0,0, setiap class, atribut atau pseudo-class 0,1,0, dan setiap nama elemen atau pseudo-element 0,0,1. Selector universal dan :where() tidak dihitung sama sekali.
Bagaimana :is(), :not() dan :has() dihitung?
Ketiganya dihitung sebagai argumen terkuatnya. Jadi :is(#a, .b) p mendapat skor 1,0,1, karena #a adalah bagian terkuat di dalam :is(). Aturan dengan :where(#a) p mendapat skor 0,0,1.
Mengapa aturan yang berada di layer kalah dari aturan biasa?
Untuk deklarasi normal, aturan di luar layer mana pun mengalahkan aturan di dalam layer. Untuk !important urutannya terbalik, sehingga layer yang lebih awal menang. Atribut style normal mengalahkan setiap aturan stylesheet normal, dan atribut style !important mengalahkan setiap aturan !important lainnya.
Apakah CSS saya dikirim ke mana pun?
Tidak. Browser Anda mengurai dan mencocokkan selector di tab ini, dan tidak ada yang dikirim ke server.
Ulasan
Belum ada ulasan. Jadilah yang pertama.