CSS specificity kalkulyatoru
Hər sətirə bir CSS seçici yazın — kalkulyator onu hissələrə ayırır, (a,b,c) ağırlığını hesablayır və hansı qaydanın qalib gələcəyini göstərir.
/* #nav .item a → (1,1,1) */
/* .nav .item a:hover → (0,3,1) */
/* nav ul li a → (0,0,4) */
/* winner: #nav .item a → (1,1,1) */Necə istifadə etmək olar
- Hər sətirə bir seçici yazın (10 sətirə qədər) və ya hazır nümunə seçin.
- Rəngli təhlilə baxın: qırmızı hissələr
a(ID), mavi hissələrb(sinif, atribut, pseudo-sinif), yaşıl hissələrc(teq, pseudo-element) deməkdir. (a,b,c)nişanlarını müqayisə edin: əvvəla, bərabərlik olduqdab, sonracbaxılır. Reytinqdə birinci olan seçici qalib gəlir.- Tam bərabərlik olarsa, CSS-də sonra yazılan qayda qalib gəlir.
!important, inline stillər və@layerayrıca nəzərə alınır.
Bu necə işləyir
Üç ədəd: (a,b,c)
Specificity üç sütundan ibarətdir. a — ID seçicilərinin (#id) sayı, b — sinif (.class), atribut ([type]) və pseudo-sinif (:hover) sayı, c — teq seçicilərinin (div) və pseudo-elementlərin (::before) sayıdır. Müqayisə soldan sağa aparılır: bir ID istənilən sayda sinifdən güclüdür, on bir teq isə bir sinfi heç vaxt üstələmir — sütunlar bir-birinə keçmir.
#nav .item a → (1,1,1)
.nav .item a:hover → (0,3,1)
nav ul li a → (0,0,4)Nə sayılır, nə yox
Universal seçici *, kombinatorlar (boşluq, >, +, ~) və :where() ağırlığa 0 əlavə edir. [id="x"] kimi atribut seçicisi ID yox, atributdur, ona görə b sütununa düşür. Tək iki nöqtə ilə yazılan köhnə :before, :after, :first-line və :first-letter pseudo-element sayılır və c-yə əlavə olunur.
:is(), :not(), :has() və :where()
:is(), :not() və :has() özləri heç nə əlavə etmir, lakin siyahıdakı ən güclü arqumentin ağırlığını götürür: :is(#a, .b) — (1,0,0)-dır. :where() isə həmişə sıfırdır, buna görə də asanlıqla üstələnməli olan reset və baza stilləri üçün əlverişlidir. :nth-child(2n+1 of .x) pseudo-sinif (b) üstəgəl .x seçicisinin ağırlığıdır.
Specificity bütün kaskad deyil
Kaskad əvvəlcə stilin mənşəyinə və !important-a, sonra elementə bağlı (inline) stillərə, daha sonra @layer qatlarına baxır və yalnız bundan sonra specificity-ni müqayisə edir; sonda yazılış sırası həll edir. Buna görə style="..." və !important seçicinin ağırlığından asılı olmayaraq adi qaydanı üstələyir, sonrakı qatdakı qayda isə əvvəlki qatdakı daha güclü seçicini üstələyir. !important üçün qatların sırası tərsinə çevrilir.
@layer base, components;
@layer base { #page p { color: red; } }
@layer components { p { color: blue; } }
/* components qalib gəlir: qat sonradır */Tez-tez verilən suallar
Niyə qaydam CSS-də sonra yazılsa da tətbiq olunmur?
Yazılış sırası yalnız specificity bərabər olduqda həll edir. Çox güman ki, başqa qaydanın seçicisi daha güclüdür. Hər iki seçicini kalkulyatora yazıb müqayisə edin, sonra !important, inline stilləri və @layer-i yoxlayın.
!important specificity-ni dəyişirmi?
Xeyr. !important kaskadın ayrıca mərhələsidir: vacib bəyannamə adi bəyannamədən güclüdür, bir neçə vacib bəyannamə arasında isə yenə specificity və sıra həll edir. !important yazmaqdansa seçicini sadələşdirmək və ya stilləri @layer-ə çıxarmaq daha yaxşıdır.
Çoxlu sinif bir ID-ni üstələyə bilərmi?
Xeyr. a sütunu b-dən əvvəl müqayisə olunur, ona görə yüz sinif belə bir ID-ni keçmir: (1,0,0) istənilən (0,N,M)-dən güclüdür. Amma (0,2,0) (0,1,5)-i üstələyir.
Miras alınan dəyər müqayisədə iştirak edirmi?
Xeyr. Elementə birbaşa düşən istənilən qayda — hətta * seçicisi və sıfır specificity ilə belə — valideyndən miras alınan dəyəri üstələyir.
