ToolHub
Buka Alat

Kalkulator Spesifisitas CSS

Hitung dan bandingkan skor spesifisitas selector CSS, penguraian visual

Peralatan developer
Luncurkan Alat Semua Alat

Tentang Alat Ini

Kalkulator Spesifisitas CSS memungkinkan Anda memasukkan selector CSS apa pun dan langsung melihat skor spesifisitasnya, diuraikan menjadi tiga dimensi: ID, kelas, dan elemen. Mendukung perbandingan berdampingan dua selector, deteksi otomatis pemenang spesifisitas, serta menyediakan contoh selector umum dan referensi aturan spesifisitas.

Fitur Utama

Pratinjau Cepat

Kasus Penggunaan

css specificity selector

Pertanyaan Umum

Apa itu Spesifisitas CSS?

Spesifisitas CSS adalah sistem penilaian yang digunakan untuk menentukan aturan CSS mana yang berlaku ketika beberapa selector menargetkan elemen yang sama. Ini menghitung bobot berdasarkan jenis selector: selector ID memiliki bobot tertinggi, diikuti oleh selector kelas dan atribut, dan terakhir selector elemen.

Bagaimana cara menghitung spesifisitas?

Spesifisitas dihitung sebagai skor tiga bagian (ID, kelas, elemen). Setiap selector ID menambah 1 di kolom ID, setiap selector kelas, atribut, atau pseudo-class menambah 1 di kolom kelas, setiap selector elemen atau pseudo-element menambah 1 di kolom elemen.

Apakah !important menimpa prioritas?

Ya, deklarasi !important akan menimpa semua perhitungan spesifisitas normal. Ketika beberapa aturan !important bertentangan, yang memiliki spesifisitas lebih tinggi yang berlaku. Gaya inline juga akan menimpa semua spesifisitas berbasis selector.

Bisakah membandingkan dua selector secara berdampingan?

Ya, alat menyediakan panel perbandingan berdampingan, Anda dapat memasukkan dua selector dan langsung melihat mana yang memiliki spesifisitas lebih tinggi. Tanda pemenang akan otomatis muncul di samping selector dengan skor lebih tinggi.

Jenis selector apa yang didukung oleh kalkulator?

Kalkulator mendukung selector ID, selector kelas, selector atribut, selector pseudo-class (seperti :hover dan :nth-child), selector elemen, dan selector pseudo-element (seperti ::before dan ::after). Juga menyediakan contoh umum, klik untuk mengisi.

Alat terkait

Validator JSONPemilih WarnaGenerator HashGenerator UUID