CSS seçicilərinin xüsusi xüsusiyyətləri haqqında nə…

Spesifiklik, konflikt halında CSS qaydalarının prioritetini müəyyən edir, eyni elementə müxtəlif stillər tətbiq olunduqda. Hər bir seçici üçün hesablanır.

Spesifiklik, dörd kateqoriyadan (A, B, C, D) ibarət ədədi qiymətləndirmədir və 0,0,0,0 kimi yazılır. Rəqəm nə qədər yüksək olarsa, spesifiklik də o qədər yüksəkdir.

Kateqoriyalar:

A (sətir içi stil): HTML elementində style atributu ilə təyin olunan stillər. Onlar ən yüksək spesifikliyə malikdirlər (məsələn, 1,0,0,0).
B (ID): ID seçiciləri (məsələn, #mənim-id). İkinci rəqəmi artırır (məsələn, 0,1,0,0).
C (Sınıf, Atribut, Pseudo-sınıf): Sınıf seçiciləri (məsələn, .mənim-sınıf), atribut (məsələn, [type="text"]), pseudo-sınıf (məsələn, :hover, :first-child). Üçüncü rəqəmi artırır (məsələn, 0,0,1,0).
D (Element, Pseudo-element): HTML etiketi seçiciləri (məsələn, div, p) və pseudo-elementlər (məsələn, ::before, ::after). Dördüncü rəqəmi artırır (məsələn, 0,0,0,1).

Hesablama nümunəsi:

p - 0,0,0,1
.mənim-sınıf - 0,0,1,0
#mənim-id - 0,1,0,0
div p - 0,0,0,2 (iki elementin spesifikliklərinin cəmidir)
#mənim-id .mənim-sınıf - 0,1,1,0 (ID və sinfinin cəmi)
div#mənim-id.mənim-sınıf:hover - 0,1,2,1 (element, ID, sinif və pseudo-sınıfın cəmi)

Qaydalar:

sətir içi stilin spesifikliyi hər zaman digər seçicilərin hər hansı bir kombinasiyasından yüksəkdir, !important bayrağı istisna olmaqla.
!important bayrağı olan qaydalar ən yüksək prioritetə malikdir və hətta sətir içi stili də üstələyir. !important istifadəsi debugging çətinliyi səbəbindən tövsiyə edilmir.
Eyni spesifiklikdə, CSS faylında sonuncu elan olunan qayda tətbiq edilir.
Ümumi seçici (*) və :where() spesifikliyi 0,0,0,0-dır və ümumi spesifikliyi artırmır.

/*
  Spesifiklik: 0,0,0,1
  Əgər daha spesifik qaydalar yoxdursa, tətbiq olunur
*/
p {
  color: blue;
}

/*
  Spesifiklik: 0,0,1,0
  p etiketi üçün qaydanı üstələyəcək
*/
.text {
  color: green;
}

/*
  Spesifiklik: 0,1,0,0
  .text sinfi üçün qaydanı üstələyəcək
*/
#əsas-mətn {
  color: red;
}

/*
  Spesifiklik: 1,0,0,0
  Əgər elementin `style="color: purple;"` atributu varsa, tətbiq olunur
*/
/* <p style="color: purple;">Mətn</p> */

/*
  Çox yüksək spesifiklik, hər şeyi üstələyəcək
  İstifadəsi yalnız çox vacib hallarda tövsiyə olunur
*/
.override-text {
  color: black !important;
}

CSS seçicilərinin xüsusi xüsusiyyətləri haqqında nə bilirsiniz?