·web
CSS Specificity Hesaplayıcı
İki selector yapıştır, (a, b, c) tuple'ını gör, hangisinin kazanacağını anla. Token-token renkli breakdown. `:where()`, `:not()`, `:is()` ve `:has()` doğru hesaplanır.
css · specificity · selectors
İki selector yapıştır, (a, b, c) tuple'ını gör, hangisinin kazanacağını anla. Token-token renkli breakdown. `:where()`, `:not()`, `:is()` ve `:has()` doğru hesaplanır.
css · specificity · selectors
Çoğu dev specificity'yi yanlış sayar — ve !important ile çözmeye çalışır. Bu lab iki selector arasında karşılaştırma yapar, hangi kuralın kazandığını gösterir.
Üç sayım, soldan sağa karşılaştırılır:
#header).btn, [type=text], :hover)div, ::before)#header (1, 0, 0) > .btn.large.primary (0, 3, 0) > nav a:hover (0, 1, 2). İlk farklı bileşen kazanır — yüksek a her şeyi yener, eşitse b'ye bakılır.
:where() specificity'ye 0 katar. Modern CSS'in en iyi özelliği — :where(.theme-dark) .btn yazsan, ana .btn ile aynı specificity'de kalır, override etmez.:not(), :is(), :has() içlerindeki en yüksek specificity argümanını alır. :is(#x, .y) = (1, 0, 0), çünkü #x daha güçlü.style="..." specificity'den de yüksek (sadece !important yener).!important specificity'yi atlar — aynı önemde kurallar için specificity bakılır.:where() ile reset / theming yap, kullanıcı kuralları override etmesin!important sadece üçüncü-parti override için (örn. analytics widget'ı, Tailwind class).block__elem--mod) tek-class kuralı sağlar, savaş baştan biter