Css moștenire, cascadă, specificitatea selectorilor

În acest capitol:

moștenire

Când se specifică un stil pentru un element, unele dintre proprietăți pot fi moștenite de către copii și descendenți, acest efect se numește moștenire.







De exemplu, toate elementele situate în interiorul unui element . sunt copii și descendenți ai săi. Dacă stilul pentru setați culoarea de culoare a culorii textului cu culoarea CSS, culoarea textului tuturor copiilor și descendenților săi devin și roșii:

Puteți să ignorați proprietățile moștenite aplicând o regulă individuală elementului dorit:

Pentru a afla care proprietăți CSS sunt moștenite și care nu sunt, trebuie să consultați descrierea unei anumite proprietăți în referința CSS.

Calcularea specificității (priorității) selectorilor

Există mai multe moduri de a aplica stilul de design elementului dorit. Dar ce se întâmplă dacă un element alege doi sau mai mulți selectori care se exclud reciproc? Această dilemă este rezolvată folosind două principii ale CSS: specificitatea selectorilor și a cascadei.

Specificitatea selectorilor (specificitatea selectorului) determină prioritatea lor în foaia de stil. Cu cât selectorul este mai specific, cu atât mai mare este prioritatea acestuia. Pentru a calcula specificitatea selectorului, se folosesc trei grupe de numere (a, b, c), calculul fiind efectuat după cum urmează:

  • Se numără numărul de identificatori din selector (grupul a)
  • Numărul selectorilor de clasă, atribut și pseudo-clasă din selector (grupul b)
  • Numărul selectorilor de tip și al pseudo-elementelor din selector (grupa c)
  • Selectorul din interiorul clasei pseudo-negation (: not) este considerat ca orice alt selector, dar clasa de pseudo negatie nu participa la calculul selectorului
  • Selectorul universal (*) și combinatorii nu participă la calcularea greutății selectorului






În exemplul de mai jos, selectorii sunt aranjați în ordinea cresterii specificității lor:

Cea mai mare prioritate are un număr din grupul "a", numărul grupului "b" are o prioritate medie, numărul din grupul "c" are cea mai mică prioritate. Numerele din diferite grupuri nu pot fi însumate într-o singură comună; ia din exemplul ultima linie cu specificitatea selectorului „101“ - aceasta nu înseamnă numărul de „o sută unu“, ceea ce înseamnă că un selector al grupului «a» a fost utilizat (identificator) și un selector al grupului «c» (selector tip).

Cascada

Cascading este o caracteristică a CSS, cu ajutorul căruia browserul determină valorile ce proprietăți vor fi aplicate unui element atunci când apare un conflict de proprietăți. Un conflict de proprietate apare când sunt definite mai multe reguli pentru un element al cărui selector are aceeași specificitate și care conține aceleași proprietăți, dar cu valori diferite.

Cascada funcționează după cum urmează: în cazul în care foaia de stil pentru un singur element definit de niște reguli, selectorii având aceeași specificitate, și ele cuprind caracteristicile conflictuale, valorile elementelor ale proprietăților conflictuale sunt setate la regula, care este dispus sub stiluri tabel:

Dacă reguli diferite pentru un element conțin proprietăți care nu intră în conflict, ele sunt combinate într-un singur stil, adică fiecare nouă regulă adaugă informații despre stil nou regulii de mai sus:

Codul din exemplul de mai sus este echivalent cu codul din exemplul de mai jos, în care toate cele trei proprietăți sunt specificate într-o singură regulă:

De obicei, norme suplimentare pentru elementul specificat în cazurile în care el a fost dat un stil pentru mai multe elemente, dar în afară de faptul că trebuie să adăugați altceva pentru un anumit element:







Trimiteți-le prietenilor: