Sfat rapid Înțelegerea specificității CSS

"C" în CSS înseamnă cascadă. Aceasta înseamnă că acele reguli de stil care apar mai târziu în foaia de stil vor înlocui regulile care apar mai devreme. Dar acest lucru nu este întotdeauna cazul. Trebuie să luați în considerare și altceva: specificitatea. În acest sfat rapid, vă voi arăta cum să faceți asta.


Reguli de specificitate

Specificitatea CSS este în esență aceasta: cu cât selectorul dvs. este mai specific, cu atât va avea mai multă prioritate. Pentru a afla care selectori merită mai mult, utilizați acest sistem:

  • Dați fiecărui selector de elemente HTML un punct. Exemplu: p
  • Dați fiecărui selector de clasă 10 puncte. Exemplu: coloană
  • Dați fiecărui selector de id 100 puncte. Exemplu: #wrap
  • Adăugați punctele pentru fiecare piesă a selectorului pentru a obține valoarea completă a selectorului.

De exemplu

 #test fundal: roșu;  / * specificitate: 100 * / .item p fundal: verde;  / * specificitate: 10 + 1 = 11 * / p fundal: portocaliu;  / * specificitate: 1 * / corp #wrap p fundal: galben;  / * specificitate: 1 + 100 + 1 = 102 * /
Cod