CSS - Reguli de prioritate (greutate)

Știați că CSS are o greutate specifică pentru fiecare regulă de stil? Acesta este un aspect foarte important al CSS, deoarece va evita orice neconcordanță între ceea ce doriți să obțineți și ceea ce veți obține în realitate.

Un exemplu:

Încercați următorul cod HTML:

 div {fundal-culoare: albastru;} 

Ca rezultat veți obține un pătrat albastru de 100x100 px.

Acum adăugați o clasă la ea:

 div {culoare-fundal: albastru;}. MaDiv {culoare-fundal: roșu;} 

Pătratul a devenit roșu!

Acum folosiți un cod:

 div {culoare-fundal: albastru;} .maiv {background-color: roșu;} #maDiv {culoare-culoare: galben;} 

Pătratul este acum galben, deoarece ID-ul este mai puternic decât clasa.

Utilizarea următoare definește un tag-uri stil ithe:

 div {culoare-fundal: albastru;}. MaDiv {culoare-fundal: roșu;} # MaDiv {culoare-fundal: galben;} 

Pătratul devine verde: în timp ce în teorie au fost atribuite patru culori diferite!

Greutățile

Aceste rezultate sunt consecințele greutății (numite și reguli de prioritate) CSS:

• Greutatea unei etichete este de 1
• Greutatea unei clase este de 10.
• Greutatea unui ID este de 100.
• Greutatea unui atribut de stil este de 1000.

Acestea sunt greutatea de bază, există și altele, de exemplu, pseudo-clase (: hover, : after: focus ...). Exemplu de atribut CSS: hover adaugă doar o greutate mică unui element când cursorul mouse-ului este trecut.

Acumularea de greutate

O regulă de stil poate avea apoi o greutate intermediară. Într-adevăr, stiva de greutate.

Exemplu:

 div {culoare-fundal: albastru;} .maiv {background-color: roșu;} .maiv {background-color: galben;} 

După cum puteți vedea, am un element (greutate 1) și două clase egale (greutate 10): ultimul element preia și pătratul nostru este galben. Acum, după adăugare

 div {fundal-culoare: albastru;} div.maDiv {fundal-culoare: roșu;} .maiv {background-color: galben;} 

Pătratul devine roșu. De ce?

• ".mdiv" - 10
• "div.maDiv" combină un element și o clasă - 11!

Avertisment: adăugarea uneori a unei clase la o regulă nu este suficientă pentru a mări greutatea tuturor elementelor implicate.

Rețineți că

Comparați rezultatul acestui cod:

 div {fundal-culoare: albastru;} div # maDiv {culoare-fundal: roșu;} 

Cu rezultatul acestei:

 div {culoare-fundal: albastru;} div #maDiv {background-color: roșu;} 

În primul caz divul nostru este roșu, în al doilea caz este albastru!

"Dar de ce, elementul + ID =, așa că ar trebui să fie mereu roșu!"

Rețineți diferența subtilă:

• div # maDiv : se aplică la div cu ID-ul "maDiv".
• div #maDiv : Se aplică tuturor elementelor al căror ID este "maDiv" conținut într-un element parent numit "div".

Pătratul nostru se referă numai la prima regulă. Ca regulă generală, întotdeauna să acordați atenție modului în care scrieți regulile dvs., utilizați corect spațiile, virgulele etc.

Exemple:

• p .myClass a {} : pentru toate link-urile conținute în orice element a cărui clasă este "myClass", toate conținute în orice

  element. Greutate: 12.

• p.myClass, a {} : pentru toate link-urile și toate

  a cărui clasă este "myClass". Greutate: 11 sau 1

• p, .myClass, a {} : pentru toate link-urile și toate elementele a căror clasă este "myClass" și toate

  element. Greutate: de la 1 la 10 sau 1