Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Kalkulator Khususitas CSS

WarnaPengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Kalkulator Khususitas CSS

Kalkulator Khususitas CSS membantu Anda menentukan skor khususitas tepat dari setiap pilihan CSS. Memahami khususitas sangat penting untuk memperbaiki konflik CSS dan menulis stylesheet yang dapat dipertahankan. Masukkan satu atau lebih pilihan dan segera lihat skor (a,b,c) mereka dibandingkan secara sampingan.

Cara Penggunaan

Masukkan satu pilihan CSS per baris di bidang masukan. Alat ini akan secara otomatis menghitung dan menampilkan skor khususitas untuk setiap pilihan. Ketika beberapa pilihan dimasukkan, yang memiliki khususitas tertinggi akan ditampilkan dalam warna hijau sehingga Anda dapat dengan cepat melihat mana aturan yang menang.

Fitur

Pengukuran yang Sesuai dengan W3C – Menghitung khususitas menggunakan algoritma resmi (a,b,c): ID, kelas/atribut/pseudo-kelas, dan elemen/pseudo-elemen.
Perbandingan Pilihan Ganda – Masukkan beberapa pilihan untuk membandingkan skor khususitas mereka dan melihat mana yang menang.
Level 4 Pemilihan CSS – Mendukung pseudo-kelas modern seperti :is(), :not(), :has(), dan :where() dengan penanganan khususitas yang benar.
Tampilan Skor Visual – Badan skor berwarna dan batang proporsional membuatnya mudah memahami khususitas secara langsung.
Pemrosesan Sisi Klien – Semua perhitungan terjadi di browser Anda. Tidak ada data yang dikirim ke server apa pun.

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa itu khususitas CSS dan bagaimana dihitung?

Khususitas CSS adalah sistem bobot yang menentukan aturan CSS mana yang berlaku ketika beberapa aturan menargetkan elemen yang sama. Ini dihitung sebagai skor tiga bagian (a,b,c): a menghitung pilihan ID, b menghitung pilihan kelas, pilihan atribut, dan pseudo-kelas, dan c menghitung pilihan elemen dan pseudo-elemen. Skor yang lebih tinggi pada posisi yang lebih awal selalu menang terlepas dari posisi yang lebih belakang.
Bagaimana :is(), :not(), dan :has() memengaruhi khususitas?

Menurut Level 4 Pemilihan CSS, khususitas dari pseudo-kelas :is(), :not(), dan :has() sama dengan khususitas dari pilihan yang paling spesifik dalam daftar argumen mereka. Misalnya, :is(.foo, #bar) memiliki khususitas dari #bar (1,0,0) karena itu adalah argumen yang paling spesifik. Pseudo-kelas :where() merupakan pengecualian — selalu memberikan khususitas nol.
Apakah urutan aturan CSS penting ketika khususitasnya sama?

Ya. Ketika dua pilihan memiliki skor khususitas yang sama, aturan urutan CSS berlaku: aturan yang muncul lebih akhir dalam kode sumber menang. Ini adalah alasan mengapa pemahaman khususitas penting — mengandalkan urutan sumber saja dapat menghasilkan stylesheet yang rapuh yang rusak ketika aturan diurutkan ulang.
Mengapa pilihan ID mengatasi beberapa pilihan kelas?

Algoritma khususitas membandingkan skor secara posisi dari kiri ke kanan. Pilihan ID memiliki skor (1,0,0) sementara sejumlah pilihan kelas hanya meningkatkan posisi kedua. Karena posisi a dibandingkan sebelum posisi b, bahkan satu pilihan ID akan selalu mengatasi kombinasi kelas, atribut, atau pseudo-kelas, terlepas dari jumlahnya.