CSS selector weight and priority

The group suddenly talked about the weight of CSS styles. This topic will appear every once in a while, but it is a bit too troublesome to search for articles with selector weights every time.
It is mainly with pictures. It is really troublesome to find the picture in my memory 😂, so I should organize one by myself and share my notes directly in the future.
In fact, the weight calculation is not troublesome, it is divided into 4 category:

1. inlineStyle : Inline style
2. #ID : ID selector
3. .Class : class, attribute and pseudo-class selector
4. Element : element and pseudo element selector

The simple weight comparison inline style > ID > Class > Element > * shouldn't need to be said, it is mainly a calculation problem when multiple selectors are mixed.

---

Most people think of CSS weights should first think of this picture

Image source: Concise modern magic

Then simply calculate the results according to the weights here to compare

E.g:

but!

There is a problem with this calculation, that is, if there are more than 10 selectors in a certain item, then it will cause doubts whether it will be promoted.
E.g

// 1个ID选择器
#demo { 
  color:green
}
// 11个class选择器
.demo1 .demo2 .demo3 .demo4 .demo5 .demo6 .demo7 .demo8 .demo9 .demo10 .demo11 { 
  color:red
}

According to the above calculation method, the result obtained is 100 ：110 , but it will not actually be covered by the 11 class selectors.

So in fact, it is an array-like form, and the calculation result is [0, 1, 0, 0] compared to [0, 0, 11, 0] ,

This can be seen from the W3C specification , which is actually divided into [A, B, C, D] , and then compares one-to-one. It will not be .

⭐ !important

!important is a special statement, W3C distinguishes it from the selector weight calculation,
However, in many articles, he is placed in the A category as the category 0 weight, and the effect observed in actual work is also the same, but the purpose of increasing the weight (Invalid property value) !important

But if it is the inherited !important attribute, it will be overwritten by the new declaration.

If you use shorthand attributes and use !important declaration

Declaring a shorthand property (e.g., 'background') to be "!important" is equivalent to declaring all of its sub-properties to be "!important".

background shorthand attribute (such as' 0609e3c20d1edd') as " !important " is equivalent to declaring all its sub-attributes as " !important ".

Next, look at a complete example <div class="demo-class1 demo-class2"><span>test text ABC</span></div> element style:

.demo-class1 {
  font: italic 12pt sans-serif !important;
  text-indent: 1em ! important; // 被覆盖
}
.demo-class2 {
  font-weight: bold; // 未生效
  font-size: 24pt; // 未生效
  line-height: 1.2 !important; // 生效
  text-indent: 1.5em !important; // 生效
}
.demo-class2 span {
  font-style: normal // 生效
}

---

end

Recommended weight calculation graph


Image source: CSS-Tricks

Selector weight modification in the new version

In the latest version of the W3C selector document , the inline style has been removed from the weight, and the weight has become three types [ #ID , .Class , Element ]

In reading the W3C specification, I found that there is such a sentence

By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style sheet.

By default, author style sheets (author style sheet) user style sheets (user style sheet). However, for the "!important" rule, the priority is reversed. Compared with the rules in UA's default style sheet, all user and author rules have greater weight.

Among them, Author Style sheets and User Style sheets are nouns that I have not encountered. UA is the default style of the browser (user agent). From the results of the reference:

Author style sheet ( Author Style sheets )
As a developer, we configure the style sheet for the project

User Style Sheet ( User Style sheets )
A style sheet generated by a function that the browser provides for users who browse the site to modify the style of the current site (usually implemented by a browser plug-in)

Documentation resources

CSS2 - 6.4 The cascade - W3C Recommendation
CSS2 - 6.4.2 !important rules - W3C Recommendation
CSS2 - 6.4.3 Calculating a selector's specificity - W3C Recommendation
selectors - 16. Calculating a selector’s specificity - W3C Recommendation
Draft - 6.3. Important Declarations: the !important annotation - W3C Editor's Draft

CSS selector weight calculation rules-concise modern magic
Day20: CSS specificity of small things (css specificity)
Specifics on CSS Specificity | CSS-Tricks
User style sheet vs Author style sheet | Treehouse Community