CSS-specificitet, og hvornår du skal bruge CSS-vigtigt tag

CSS-specificitet er et vigtigt emne at forstå, hvis du vil blive bedre til CSS. Det er det regelsæt, der anvendes på CSS-vælgere, der bestemmer, hvilken stil der anvendes på et element.

For at forstå dette bedre er det vigtigt, at vi forstår et relateret emne - cascading i CSS.

CSS's Cascading Nature

CSS betyder Cascading Style Sheets. "Cascading" betyder, at rækkefølgen, i hvilken CSS-regler anvendes på et element, faktisk betyder noget .

Ideelt set, hvis to regler anvendes på det samme element, er den, der kommer sidst, den, der vil blive brugt. Lad os bruge et eksempel til at forstå dette.

Vi anvender to klasser på et element og giver hver klasse en anden background-color.

This is a test paragraph

Her er CSS:

.style2 { background-color: red; } .style1 { background-color: yellow; }

Dette er resultatet:

Bemærk, at det, style1der kommer sidst i stilarket, anvendes på elementet. Nu kan du forvente, at dette altid skal være, hvordan CSS anvender stilarter på elementer, men det er ikke altid tilfældet.

Tag dette næste eksempel.

This is a test paragraph

CSS ser sådan ud:

#paragraph { background-color: red; } .style1 { background-color: yellow; }

Hvilken stil forventer du at anvende på elementet? Den #paragrapheller den .style1?

Her er resultatet:

Bemærk, at den første anvendes. Det #paragrapher en id-vælger, mens den style1er en klasse-vælger. Dette skyldes, at kaskade arbejder med specificitet for at bestemme, hvilke værdier der anvendes på et element.

Så hvad er CSS-specificitet?

CSS-specificitet forklaret

Ifølge MDN er specificitet det middel, hvormed browsere beslutter, hvilke CSS-egenskabsværdier der er mest relevante for et element og derfor vil blive anvendt.

Kort sagt, hvis to CSS-vælgere gælder for det samme element, bruges den med højere specificitet.

Derfor blev ejendomsværdien af ​​id-vælgeren anvendt i vores tidligere eksempel, fordi den har en højere specificitetsværdi.

Så hvordan beregnes vælgernes specificiteter?

Specificitetshierarkiet

Det er ret vanskeligt at beregne vælgernes specificitetsværdier. En måde at beregne det på er at bruge et vægtsystem til at rangordne forskellige vælgere for at skabe et hierarki.

Vi tildeler vægte til hver vælger, så vi bedre kan forstå, hvordan hver vælger rangerer. Lad os starte med det mindste.

Elementer og Pseudo-elementer

Vi bruger elementvælger som a, pog divtil at style et valgt element, mens pseudo-elementer kan lide ::afterog ::beforebruges til at style specifikke dele af et element.

 p { color: red; }  p::before { color: red; }

Element- og pseudo-elementvælgere har den laveste specificitet. I specificitetsvægtsystemet har de en værdi på 1.

Klasser, attributter og pseudoklasser

Her er eksempler på klasser, attributter og pseudoklasser:

 .person { color: red; }  [type="radio"] { color: red; }  :focus { color: red; }

De har en højere specificitet end element- og pseudo-elementvælgere. I vores specificitetsvægtsystem har de en værdi på 10.

ID-vælgere

ID-vælgere bruges til at målrette mod et element ved hjælp af elementets ID.

 #header { color: red; }

ID-vælgere har højere specificitet end klasser og elementer. I vores system med specificitetsvægt har de en værdi på 100.

Inline-stilarter

Inline-typografier anvendes direkte på elementet i HTML-dokumentet. Dette er et eksempel:

This is a paragraph

Inline-stilarter har den højeste specificitet. I vores system med specificitetsvægt har de en værdi på 1000.

Her er en oversigt over vægtene:

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

Lad os prøve at få mening ud af det.

Egenskabsværdierne for vælgere med en højere vægt anvendes altid over en vælger med en lavere vægt.

Inline-typografier har den højeste vægt, og deres egenskabsværdi tilsidesætter enhver anden vælgers værdi, der anvendes på et element.

For eksempel, hvis vi har et element og for den samme egenskab color, er der en integreret stil. Hvis klasse- og id-vælgerne også har værdier for den samme egenskab, vinder den integrerede stil.

This is a paragraph

Stilarket:

#paragraph { color: green; } .yellow { color: yellow; }

Dette er resultatet:

Det samme sker, når en ID-vælger og klassevælger har værdier for den samme egenskab. Egenskabsværdien for ID-vælgeren gælder.

Bemærk, at vægtene kun gælder, når forskellige vælgere har værdier for det sammeproperty .

Flere elementvælgere

There are times when more than one selector is used to target an element. For example, for a list like this:


    
  • First item
  • Second item
  • Third item

You may target the list items like this:

.list > li { color: green; }

or like this:

ul > li { color: red; }

In a case where both selectors are used on the same stylesheet, which style will be applied to the list items?

Let's go back to our weight system to calculate the specificity of both selectors.

For .list > li, the weight of one class selector is 10 and the weight of an element selector is 1. Combined their sum is 11.

For ul > li, the weight of one element selector is 1. There are two element selectors used, so their sum is 2.

Which of the color values do you will think will be applied?

If you said the color of the .list>li selector will be applied, you got it right. It has a higher specificity value than the other selector.

Let's try another example. Given this element:

This is a paragraph

and these styles

#div-1 > .second-block > .text { color: blue } .first-block > #div-2 > #paragraph { color: red }

Try to calculate the specificity and guess which color value will apply.

This is the result:

Let's use our weight system to understand why the color value of the second selector is applied.

For #div-1 > .second-block > .text, we have one ID selector and two class selectors. The sum of their weights is 100 + 10 + 10 = 120.

For .first-block > #div-2 > #paragraph, we have one class selector and two ID selectors. The sum of their weights is 10 + 100 + 100 = 210.

That's why the value of latter selector is used.

You can try this example on your own to be sure that you get the hang of it.


    
  • First item

Which color will be applied to the span if the following styles are in the stylesheet?

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; }

Try to calculate the specificity and compare it with the result you get when you run the code.

Before we conclude this article, there are some important points to note.

Important Points about CSS Specificity

The weight assigned to a selector just gives us an idea of which rules get applied to an element. However, this does not always suffice.

For instance, you may assume that if you use more than 10 classes (weight >= 100) to target an element, the property values will override that of one ID selector. But this is not true. As long as the selector with more than 10 classes have no ID selector, the one ID selector will always take precedence over it.

Applying !important to the property value of any selector makes it the value that will be applied to the element. This happens regardless of the rank of the selector on the Specificity hierarchy.

Let's use an example to understand this.

This is a paragraph

If the following styles are applied

p { color: red !important; } .blue { color: blue; } #paragraph { color: purple; }

The value of the element selector p will be used because of the !important attached to the value.

However, if another selector has the !important tag attached to the same property, the value of the later selector is used.

That's why !important should be avoided because it makes it difficult override a style.

Generally, to style a specific element, it is more advisable to use a class. This makes it easier to override the styles if you ever need to do so.

Summary

Fra denne artikel kan vi se, at CSS-specificitet er et vigtigt emne at forstå, fordi det kan spare dig for timers fejlfinding.

Med denne viden kan du nemt finde ud af, hvorfor dine stilarter ikke anvendes.

Her er de vigtigste punkter at tage ud af denne artikel:

  • På grund af CSS's kaskaderende karakter, hvis der anvendes to regler på det samme element, er den, der kommer sidst, den, der vil blive brugt.
  • CSS-specificitet er et sæt regler, der bestemmer, hvilken stil der anvendes på et element.
  • Vægtsystemet er en måde at beregne specificiteten af ​​forskellige vælgere på. Her er en oversigt over vægtene:
Inline Styles - 1000 ID selectors - 100 Classes, Attributes and Pseudo-classes - 10 Elements and Pseudo-elements - 1 
  • !important tilsidesætter alle andre stilarter uanset specificiteten af ​​vælgeren, hvor den bruges.

Jeg håber du nød at læse denne artikel.