Prioritatea sau specificitatea regulilor din foaia de stil este necesară pentru browser numai în cazul în care un element html din pagină are două sau mai multe reguli în css. Încercați să modificați aceleași proprietăți ale acestui element, de exemplu, culoarea textului. În acest caz, browserul trebuie să decidă ce regulă să aplice, determinând astfel greutatea totală a selectorilor prin care aceste reguli sunt setate și apoi acționează în două moduri:
- Aplică această regulă. a căror greutate este mai mare.
- Dacă greutatea selectorilor pentru toate regulile este aceeași, se aplică o regulă care este mai presus de toate în codul css.
Selectorii de greutate în css
Greutatea selectorilor, se mai numește și specificitate, browserele definite printr-o schemă foarte simplă. Greutatea fiecărui selector poate fi reprezentată ca un grup de 4 numere independente:
Fiecare selector, cum ar fi un cap. adaugă una câte una la una din aceste 4 rânduri, în funcție de tipul acesteia.
Exemple de calcul prioritar:
Într-o astfel de serie numerică, cifra din dreapta are cea mai mică greutate, iar cea mai din stânga este cea mai mare. Aceasta înseamnă că și unitatea din al doilea rând din dreapta este mai mare decât orice număr din prima cifră. și anume:
0,0,1,0 mai mult de 0,0,0,5 și 0,1,0,0 mai mult de 0,0,2,5
Tabelul de mai jos arată care rând adaugă unul la fiecare dintre tipurile existente de selectori
Tabel de distribuție a greutăților selectorilor
Selector universal * - Nu are greutate în raport cu alți selectori, nimic nu adaugă - 0,0,0,0
Selectori de etichete (de exemplu, div), precum și pseudo-elemente (de exemplu: după) - 0,0,0,1
Selectorii de clasă (de exemplu .box), selectorii de atribute (de exemplu, un titlu = "Pagina de pornire")), precum și pseudo-clase (de exemplu:
Identificatori (de exemplu #modal) - 0,1,0,0
Reguli scrise la un element direct prin atributul style = "" (inline) - 1,0,0,0
Pseudo-clasa: nu are nici o greutate, însă greutatea selectorilor, care sunt argumentele sale (de exemplu, input: not ([type = "submit"])) este considerată ca de obicei.
Simboluri care indică rapoartele selectorului + (selectorii învecinați),> (element copil imediat) și
(selectori corelați) nu sunt luați în considerare, greutatea lor este 0
Reguli scrise unui element în etichete nu diferă de stilurile obișnuite de tip plug-in (de exemplu, stil.css), browserele nu fac distincții între regulile din aceste două surse, nu le acordă nici un privilegiu.
Exemple de toate combinațiile posibile de tipuri de selectori (cu greutate):
Alte elemente care controlează maparea
Stilurile implicite ale browserelor (fiecare browser are propriile sale, sunt incluse numai dacă elementele nu au nici un fel de stiluri) - au cea mai mică prioritate posibilă între toate stilurile.
Atributele tag-uri care afișează elemente, cum ar fi lățimea = „“ și height = „“ - mai multe stiluri agent utilizator, dar mai slabă decât oricare dintre selectorii. Acestea pot fi întrerupte chiar și cu un selector universal *.
Iată un exemplu simplu de numărare a specificității selectorilor: avem un interval. cărora le sunt date două reguli opuse:
În acest caz, specificitatea primei reguli este 0,0,0,1, iar specificitatea celui de-al doilea este 0,0,1,1, deoarece în cea de-a doua regulă aceeași scală este definită prin intermediul părintelui din clasa .parent1.
Ponderea selectorilor celor două reguli este 0,0,0,1, prin urmare se aplică culoarea regulii: roșu. mergând în codul de mai jos.
Aici este aplicată prima regulă, în ciuda faptului că a doua se aplică în codul css, mai jos, deoarece greutatea primei reguli (0,0,3,1) este mai mare decât greutatea celei de-a doua reguli (0,0,1,1).
Culoarea textului va fi verde, deoarece stilul inline este mai puternic decât de obicei. Greutatea regulii uzuale este de 0,1,0,2, greutatea regulii inline este 1,0,0,0
Important!
Spre deosebire de selectori. importantă nu este folosit pentru toate regulile, și pentru fiecare proprietate în parte, că, în ciuda greutății selectorii altor reglementări, această proprietate a fost aplicat cu precizie elementului.
Deși specificitatea primei reguli este mai mare, proprietatea de culoare este încă aplicată de la a doua regulă, deoarece este atribuită! Important. și greutatea selectorilor altor reguli nu este importantă pentru el. Proprietatea în stilul fontului va rămâne italică. de la primele selectorii regulă greutate mai mult, și aceeași proprietate în a doua regulă nu este marcat ca fiind foarte important (! importantă).
Poziția în cod nu este, de asemenea, importantă pentru proprietățile cu! Important. dacă este important, numai una este atribuită pentru proprietatea acestui element. Scrierea după cum urmează:
avem de asemenea valoarea culorii: roșu.
Totul se modifică dacă două sau mai multe reguli sunt atribuite unei proprietăți! Important. În acest caz, greutatea selectoare începe din nou să fie luate în considerare, iar dacă acesta este același, și să ia în considerare poziția în codul.
În acest caz, se va aplica proprietatea de culoare: albastru. Deoarece greutatea selectorilor regulii sale este mai mare.
Din nou, proprietatea de culoare: albastru. deoarece specificitatea regulii este mai mare, iar ordinea regulilor în acest caz nu contează.
Dacă ponderea regulilor este:
Se va aplica ceea ce este ultimul.
În acest caz, culoarea regulii: roșu! Important va fi valabil. deoarece proprietatea cu regula importantă are mai multă greutate decât stilurile inline care nu au o astfel de regulă.
Aici, regula de culoare inline: verde! Important va funcționa. deoarece proprietățile inline cu regula importantă au cea mai mare pondere posibilă.
Prioritatea stilurilor moștenite
Foarte important, greutatea de stiluri, elemente moștenite de la părinți este întotdeauna la zero, este ușor de a ucide, folosind selectorul de tag-ul convențional, de exemplu, sau un div. chiar dacă regula atribuită părintelui este importantă.
De asemenea, este important să știți că stilurile moștenite pot fi redefinite utilizând selectorul universal *. În ciuda faptului că specificitățile selectorului și * moștenirii sunt zero, specificitatea * este de fapt întotdeauna mai mare decât stilurile moștenite.
În ambele cazuri, culoarea este aplicată pentru a acoperi: verde. deoarece orice regulă întrerupe greutatea proprietăților moștenite.
Acest lucru este adevărat chiar dacă stilurile sunt atribuite părintelui elementului direct prin atributul de stil. și chiar cu regula importantă. greutatea lor față de elementele copilului va fi în continuare zero.
Rezultat: în ambele cazuri, proprietatea span este setată la culoare: verde.
Acestea sunt toate caracteristicile specificității regulilor din CSS, care trebuie înțelese pentru impunerea calității. La început, poate părea că nu există altă modalitate de a învăța cum să memoreze, dar toate aceste principii sunt foarte simple și, în practică, se adaugă rapid la un sistem comun.
- bootstrap
- CSS
Trimiteți-le prietenilor: