Specificitatea CSS și momentul utilizării etichetei importante CSS

Specificitatea CSS este un subiect important de înțeles dacă doriți să vă îmbunătățiți CSS. Setul de reguli aplicate selectorilor CSS este cel care determină ce stil se aplică unui element.

Pentru a înțelege mai bine acest lucru, este important să înțelegem un subiect conex – cascada în CSS.

Natura în cascadă a CSS

CSS înseamnă foi de stil în cascadă. „Cascadă” înseamnă că Ordin în care regulile CSS sunt aplicate unui element contează de fapt.

În mod ideal, dacă se aplică două reguli aceluiași element, cea care vine ultima este cea care va fi utilizată. Să folosim un exemplu pentru a înțelege acest lucru.

Vom aplica două clase unui element și le vom oferi fiecărei clase un altul background-color.

<p class="style1 style2"> This is a test paragraph</p>

Iată CSS:

.style2 {
  background-color: red;
}

.style1 {
  background-color: yellow;
}

Acesta este rezultatul:

Observați că style1 care apare ultima în foaia de stil se aplică elementului. Acum vă puteți aștepta să fie întotdeauna modul în care CSS aplică stiluri elementelor, dar nu este întotdeauna cazul.

Luați acest exemplu următor.

<p class="style1" id="paragraph"> This is a test paragraph</p>

CSS arată astfel:

#paragraph {
  background-color: red;
}

.style1 {
  background-color: yellow;
}

Ce stil așteptați să aplicați elementului? #paragraph sau .style1?

Iată rezultatul:

Observați că primul este aplicat. #paragraph este un selector de identificare, în timp ce style1 este un selector de clasă. Acest lucru se datorează faptului că cascada funcționează cu specificitate pentru a determina ce valori sunt aplicate unui element.

Deci, ce este specificitatea CSS?

Specificarea CSS explicată

Conform MDN, Specificitatea este mijlocul prin care browserele decid ce valori ale proprietății CSS sunt cele mai relevante pentru un element și, prin urmare, vor fi aplicate.

Pur și simplu, dacă doi selectoare CSS se aplică aceluiași element, se folosește cel cu specificitate mai mare.

De aceea, în exemplul nostru anterior, valoarea proprietății selectorului de id a fost aplicată deoarece are o valoare de specificitate mai mare.

Deci, cum sunt calculate specificitățile selectorilor?

Ierarhia specificității

Calculul valorilor specificității selectorilor este destul de complicat. O modalitate de a o calcula este de a utiliza un sistem de pondere pentru a clasifica diferiți selectori pentru a crea o ierarhie.

Vom atribui greutăți fiecărui selector pentru a înțelege mai bine cum se clasează fiecare selector. Să începem cu cel mai puțin.

Elemente și pseudo-elemente

Folosim selectoare de elemente precum a, p, și div pentru a stiliza un element selectat, în timp ce pseudo-elemente ca ::after și ::before sunt folosite pentru a stiliza anumite părți ale unui element.

<!-- This is an element selector-->
p { 
    color: red;
}

<!-- This is an pseudo-element selector-->
p::before {
    color: red;
}

Selectorii de elemente și pseudo-elemente au cea mai mică specificitate. În sistemul ponderii specificității, acestea au o valoare de 1.

Cursuri, atribute și pseudo-clase

Iată exemple de clase, atribute și pseudo-clase:

<!-- This is a class selector-->
.person { 
    color: red;
}

<!-- This is an attribute selector-->
[type="radio"] { 
    color: red;
}

<!-- This is a pseudo-class selector-->
:focus {
    color: red;
}

Ele au o specificitate mai mare decât selectorii de elemente și pseudo-elemente. În sistemul nostru de greutate specific, acestea au o valoare de 10.

Selectoare ID

Selectoarele ID sunt utilizate pentru a viza un element folosind ID-ul elementului.

<!-- This is an ID selector-->
#header {
    color: red;
}

Selectorii ID au specificitate mai mare decât clasele și elementele. În sistemul nostru de greutate specific, acestea au o valoare de 100.

Stiluri în linie

Stilurile în linie sunt aplicate direct pe elementul din documentul HTML. Acesta este un exemplu:

<p style="color: red">This is a paragraph</p>

Stilurile în linie au cea mai mare specificitate. În sistemul nostru de greutate specific, acestea au o valoare de 1000.

Iată un rezumat al greutăților:

Inline Styles                               - 1000
ID selectors                                -  100
Classes, Attributes and Pseudo-classes      -   10
Elements and Pseudo-elements                -    1 

Să încercăm să-i dăm sens.

Valorile proprietății selectorilor cu o greutate mai mare vor fi aplicate întotdeauna asupra unui selector cu o greutate mai mică.

Stilurile în linie au cea mai mare greutate, iar valoarea proprietății lor înlocuiește orice valoare a celuilalt selector aplicată unui element.

De exemplu, dacă avem un element și pentru aceeași proprietate color, există un stil în linie. Dacă selectoarele de clasă și id au și valori pentru aceeași proprietate, stilul în linie câștigă.

<p style="color: red" class="yellow" id="paragraph">This is a paragraph</p>

Foaia de stil:

#paragraph {
    color: green;
}

.yellow {
    color: yellow;
}

Acesta este rezultatul:

Același lucru se întâmplă atunci când un selector ID și un selector de clasă au valori pentru aceeași proprietate. Se va aplica valoarea proprietății selectorului ID.

Rețineți că ponderile se aplică numai atunci când diferiți selectori au valori pentru la fel property.

Selectoare de elemente multiple

Există momente în care mai mult de un selector este utilizat pentru a viza un element. De exemplu, pentru o listă ca aceasta:

<ul class="list">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Puteți viza elementele listei astfel:

.list > li { 
    color: green;
}

sau așa:

ul > li {
    color: red;
}

În cazul în care ambii selectori sunt utilizați pe aceeași foaie de stil, ce stil va fi aplicat articolelor din listă?

Să ne întoarcem la sistemul nostru de greutate pentru a calcula specificitatea ambilor selectori.

Pentru .list > li, greutatea unui selector de clasă este 10 iar greutatea unui selector de element este 1. Combinată suma lor este 11.

Pentru ul > li, greutatea unui selector de element este 1. Există două selectoare de elemente utilizate, deci suma lor este 2.

Care dintre valorile culorilor credeți că vor fi aplicate?

Dacă ai spus culoarea .list>li selectorul va fi aplicat, ai înțeles corect. Are o valoare de specificitate mai mare decât celălalt selector.

Să încercăm un alt exemplu. Având în vedere acest element:

<div class="first-block" id="div-1"> 
    <div class="second-block" id="div-2">
        <p class="text" id="paragraph">This is a paragraph</p>
    </div>
</div>

și aceste stiluri

#div-1 > .second-block > .text {
    color: blue
}

.first-block > #div-2 > #paragraph {
    color: red
}

Încercați să calculați specificitatea și ghiciți care color se va aplica valoarea.

Acesta este rezultatul:

Să folosim sistemul nostru de greutate pentru a înțelege de ce se aplică valoarea culorii celui de-al doilea selector.

Pentru #div-1 > .second-block > .text, avem un selector ID și două selectoare de clasă. Suma greutăților lor este 100 + 10 + 10 = 120.

Pentru .first-block > #div-2 > #paragraph, avem un selector de clasă și două selectoare ID. Suma greutăților lor este 10 + 100 + 100 = 210.

De aceea se folosește valoarea ultimului selector.

Puteți încerca acest exemplu pe cont propriu, pentru a fi siguri că îl veți obține.

<div class="first-block" id="div1">
    <ul class="first-list" id="list1">
        <li class="first-list-item" id="listItem1">First 
            <span class="first-span" id="span1">item</span>
        </li>
    </ul>
</div>

Ce culoare va fi aplicată la span dacă următoarele stiluri sunt în foaia de stil?

div#div1 > .first-list > #list-item > span {
    color: red;
}

#list > #list-item > #span {
    color: purple;
}

#div1 > #list > .first-list-item > .first-span {
    color: light-blue;
}

Încercați să calculați specificitatea și să o comparați cu rezultatul obținut atunci când rulați codul.

Înainte de a încheia acest articol, există câteva puncte importante de remarcat.

Puncte importante despre specificitatea CSS

Ponderea atribuită unui selector ne oferă doar o idee despre regulile care se aplică unui element. Cu toate acestea, acest lucru nu este întotdeauna suficient.

De exemplu, puteți presupune că, dacă utilizați mai mult de 10 clase (greutate> = 100) pentru a viza un element, valorile proprietății îl vor anula pe cel al unui selector ID. Dar acest lucru nu este adevărat. Atâta timp cât selectorul cu mai mult de 10 clase nu are selector ID, singurul selector ID va avea întotdeauna prioritate asupra acestuia.

Punerea în aplicare !important valoarea proprietății oricărui selector o face valoarea care va fi aplicată elementului. Acest lucru se întâmplă indiferent de rangul selectorului din ierarhia specificității.

Să folosim un exemplu pentru a înțelege acest lucru.

<p class="blue" id="paragraph" style="color: green"> This is a paragraph </p>

Dacă se aplică următoarele stiluri

p {
    color: red !important;
}
.blue {
    color: blue;
}

#paragraph {
    color: purple;
}

Valoarea selectorului de elemente p va fi folosit din cauza !important atașat valorii.

Cu toate acestea, dacă un alt selector are !important etichetă atașată aceleiași proprietăți, se folosește valoarea selectorului ulterior.

De aceea !important ar trebui să fie evitate, deoarece face dificil să anuleze un stil.

În general, pentru a stiliza un anumit element, este mai indicat să folosiți o clasă. Acest lucru face mai ușor să înlocuiți stilurile dacă vreți să faceți acest lucru.

rezumat

Din acest articol, putem vedea că specificitatea CSS este un subiect important de înțeles, deoarece vă poate economisi ore de depanare.

Cu aceste cunoștințe, puteți afla cu ușurință de ce stilurile dvs. nu sunt aplicate.

Iată principalele puncte de eliminat din acest articol:

• Datorită naturii în cascadă a CSS, dacă două reguli sunt aplicate aceluiași element, cea care vine ultima este cea care va fi utilizată.
• Specificitatea CSS este un set de reguli care determină ce stil se aplică unui element.
• Sistemul de greutate este o modalitate de a calcula specificitatea diferiților selectori. Iată un rezumat al greutăților:

Inline Styles                               - 1000
ID selectors                                -  100
Classes, Attributes and Pseudo-classes      -   10
Elements and Pseudo-elements                -    1 

• !important suprascrie toate celelalte stiluri, indiferent de specificitatea selectorului în care este utilizat.

Sper că v-a plăcut să citiți acest articol.