CSS -Prioritetsregler (vægt)

Vidste du, at CSS anvender en specifik vægt for hver stilregel? Dette er meget aspekt af CSS, da det vil forhindre uoverensstemmelser mellem hvad du vil have og hvad du får i virkeligheden.

Et eksempel:

Prøv følgende HTML-kode:

 div {baggrundsfarve: blå;} 

Som resultat får du en blå firkant på 100X100 px.

Tilføj nu en klasse til den:

 div {baggrundsfarve: blå;}. MaDiv {baggrundsfarve: rød;} 

Firkanten blev rød!

Brug nu et id:

 div {baggrundsfarve: blå;} .maDiv {baggrundsfarve: rød;} #maDiv {baggrundsfarve: gul;} 

Firkanten er nu gul, fordi id er stærkere end klassen.

Næste brug en definerer stil ithe tags:

 div {baggrundsfarve: blå;}. MaDiv {baggrundsfarve: rød;} # MaDiv {baggrundsfarve: gul;} 

Kvadratet bliver grønt: i teorien er der fire forskellige farver tildelt det!

Vægterne

Disse resultater er konsekvenserne af vægt (også kaldet prioritetsregler) CSS:

• Vægten af ​​et mærke er 1
• Vægten af ​​en klasse er 10.
• Vægten af ​​et ID er 100.
• Vægten af ​​en stilattribut er 1000.

Disse er grundvægten, der er andre, for eksempel pseudo-klasser (: svæver, efter: fokus ...). Eksempel CSS-attributten: Hoveder tilføjer kun en lille vægt til et element, når musemarkøren er passeret over.

Akkumulering af vægt

En stilregel kan så have en mellemvægt. Faktisk er vægtstakken.

Eksempel:

 div {baggrundsfarve: blå;} .maDiv {baggrundsfarve: rød;} .maDiv {baggrundsfarve: gul;} 

Som du kan se, har jeg et element (vægt 1) og to lige klasser (vægt 10): det sidste element overtager og vores firkant er gul. Nu ved at tilføje

 div {baggrundsfarve: blå;} div.maDiv {baggrundsfarve: rød;} .maDiv {baggrundsfarve: gul;} 

Firkanten bliver rød. Hvorfor?

• ".maDiv" - 10
• "div.maDiv" kombinerer et element og en klasse - 11!

Advarsel: Det vil ikke være tilstrækkeligt at tilføje en klasse til en regel for at øge vægten af ​​alle de elementer, der var involveret.

Noter det

Sammenlign resultatet af denne kode:

 div {baggrundsfarve: blå;} div # maDiv {baggrundsfarve: rød;} 

Med resultatet af dette:

 div {baggrundsfarve: blå;} div #maDiv {baggrundsfarve: rød;} 

I det første tilfælde er vores div rød, i det andet tilfælde er den blå!

"Men hvorfor, elementet + ID =, så det skal altid være rødt!"

Bemærk den subtile forskel:

• div # maDiv : gælder div med "maDiv" ID.
• div #maDiv : Gælder for alle elementer, hvis id er "maDiv" indeholdt i et overordnet element kaldet "div".

Vores plads er kun berørt af den første regel. Som hovedregel skal du altid være opmærksom på hvordan du skriver dine regler, skal du bruge mellemrum, kommaer osv

Eksempler:

• p .myClass a {} : for alle links indeholdt i ethvert element hvis klasse er "myClass", alt indeholdt i nogen

  element. Vægt: 12.

• p.myClass, en {} : for alle links og alle

  hvis klasse er "myclass". Vægt: 11 eller 1

• p, .myClass, en {} : for alle links og alle elementer, hvis klasse er "myClass" og alle

  element. Vægt: 1 til 10 eller 1