Dacă aveți două (sau mai multe) reguli CSS conflictuale referitoare la același element, atunci browserele utilizează anumite criterii de selecție pentru a defini o prioritate mai mare.
Înțelegerea acestor criterii de selecție poate să nu pară atât de importantă. Și în majoritatea cazurilor, nu vă amenință nici un conflict. Cu toate acestea, fișierele de stiluri mai mari și mai complicate, sau cu cât sunt mai multe, cu atât este mai probabil să apară astfel de conflicte.
Dacă există mai mulți selectori CSS identici, atunci selectorul declarat mai târziu decât alții are o prioritate mai mare. De exemplu, dacă aveți următoarea declarație:
atunci paragraful va fi albastru, deoarece această regulă este declarată ultima.
Cu toate acestea, în mod intenționat, este puțin probabil să declarați selectori identici cu reguli conflictuale (pentru că acest lucru nu are sens). Cu toate acestea, teritoriul juridic al conflictelor este selectori imbricați. De exemplu, să luăm următorul exemplu:
Se pare că elementele
în interiorul elementului
apare ultima. Dar, de fapt, astfel de elemente vor fi roșii în conformitate cu regula primului selector. Acest lucru se datorează faptului că cu cât selectorul este mai specific, cu atât mai mare este prioritatea.
Specificitatea reală a grupului imbricate de selectoare este determinată pe baza unor calcule. În esență, fiecare identificator selector ( „# name“) este setat la 100, fiecare selector clasă ( „.name“) - valoarea 10 și fiecare selector HTML ( «name») - valoarea 1. Apoi, adăugarea valorilor selectori imbricate.
- p - specificitate 1 (1 selector de nume)
- div p - specificitate 2 (2 selectori de nume, 1 + 1)
- .specificul arborelui 10 (1 selector de clasă)
- div p.tree - specificitate 12 (2 selectori de nume și selector de clasă, 1 + 1 + 10)
- #baobab - specificitatea 100 (1 selector de identificatori)
- organismul #baobab .alternativ p - specificitate 112 (selector de nume, selector de identificare, selector de clasă, selector de nume, 1 + 100 + 10 + 1)
Astfel, în cazul în care toate aceste selectoare ar fi definită, p.tree div (cu o specificitate de 12) ar fi blocat selectorul de div p (cu specificitate 2) și corpul selectorului #baobab p .alternative au blocat toate acestea, indiferent de ordinea de declarare .