Dacă aveţi două (sau mai multe) norme conflictuale CSS, acel moment, la acelaşi element, există câteva reguli de bază pe care un browser le urmăreşte pentru a determina care dintre ele este cel mai specific şi, prin urmare, victorioşii.
Este posibil să nu pară ceva de genul important şi, în cele mai multe cazuri nu veţi întâlni oricefel de conflicte la toate, dar cu cât este mai mare şi mai complex, fişierul CSS, sau mai multe fişiere CSS,depinde cu câte începi să jonglezi, cu atât probabilitatea că ar fi conflicte devine mai mare.
În cazul în care aveţi aceeaşi selectori de mai multe ori, mereu cel din urmă va avea prioritate. De exemplu dacă aţi avea aşa:
p { color: red; } p { color: blue; }
Cu toate acestea, nu veţi avea în general selectori identici cu conflicte privind declaraţiile de scop (pentru că nu există mai multe puncte). Apar conflicte fireşti atunci când ai selectori fără declaraţii. În următorul exemplu:
div p { color: red; } p { color: blue; }
Ar părea că elementul p este în elementul div şi că ambele vor avea culoarea albastră , dacă e să ţinem cont de regula ultimei declaraţii, dar defapt doar elementul p va fi albastru, iar elementul div va fi roşu, şi asta pentru că avem menţionat div doar în prima declaraţie. Practic, un selector primeşte mai multe specificaţii, mai multe preferinţe, atunci când intră într-un stil conflictual.
Îmbrăcarea unui selector gol, cu specificaţii, poate cauza ceva calcule, ce trag şi timp după ele. Practic, puteţi da id-ului fiecărui selector ( “#indiferent”) o valoare de 100, la fiecare clasă de selector ( “#Indiferent”) o valoare de 10 şi la fiecare selector HTML ( “#indiferent”) o valoare de 1. Then you add them all up and hey presto, you have the specificity value. Apoi, trebuie să le adăugaţi pe toate şi repejor, aveţi valoarea specifică.
-
pare o specificitate de 1 (1 selector HTML) -
div pare o specificitate de 2 (2 selectoare HTML; 1 +1) -
.treeare o specificitate de 10 (1 selector class) -
div p.treeare o specificitate de 12 (2 selectoare HTML şi un selector class; 1 +1 +10) -
#baobabare o specificitate de 100 (1 selector id) -
body #content .alternative pare o specificitate de 112 (selector HTML, selectorul de identitate, selector class, selector HTML; 1 +100 +10 +1)
Deci, dacă toate aceste exemple au fost utilizate, div p.tree (cu o specificitate de 12) ar castiga mai multe decât div p (cu o specificitate de 2) şi body #content .alternative p ar câştiga cât toate acestea, indiferent de ordine.
