Priority algorithm when CSS rules are stacked

Inline style
Embeded style
External style
User style
Inline styles are ugly. They move through HTML documents and twist together with HTML elements, causing a lot of trouble for front-end Web developers. They often appear like this:

<P style = "color: red;"> This is a paragraph. </p>
Embeded styles are more gentleman than inline styles. They are also hosted in HTML documents, but they are used to twist together with HTML elements. They often appear in <style> elements:

<Style type = "text/css" media = "screen">
P {
Color: red;
}
</Style>
External style is a gender that does not want to stay with HTML, so it simply exists in the form of external files. We usually use the <link> element or @ import statement to import them to HTML.

<Link rel = "stylesheet" type = "text/css" href = "style.css" media = "screen"/>
We should try to use external style as much as possible. I think there are many reasons for this. As we all know, I will not repeat it.

Another user style is slightly different from the preceding three. If you use IE, you can find the place to add the User style under Tools-Internet Options-General-Appearance-Accessibility-user style sheet (forgive me for having no Internet Explorer in Chinese ).

Since we have so many ways to add styles, it is difficult to avoid style cascade. For example:

<P class = "intro" style = "color: red;"> This is a paragraph. </p>
While using the above inline style, we also use it in our external style:

P {
Color: yellow;
}
We even applied the <p> element with class = "intro:

P. intro {
Color: blue;
}
In this way, the value is specified by multiple CSS rules on the same attribute color of the same element. This situation is called Cascading ). When the cascade occurs, CSS Parser determines the final value based on the priority algorithm.

Priority algorithms consider the following three aspects in sequence:

The importance and source of CSS rules
Special Characteristics of CSS rules
The order in which CSS rules appear in the document
The algorithm process is divided into four steps:

1. List all CSS rules that specify values for an element. In the preceding example, on the <p> element of class = "intro", three CSS rules specify the color attribute.

2. Sort priorities based on declared importance and sources

There are two importance types:

Important
Normal (non-important)
Add a CSS rule! The importance of important is higher than that of impant ant.

There are three sources:

User agent stylesheet-default browser Style
Author stylesheet-developer-defined styles
User stylesheet-the user defines the style in the browser
Priority sorting of importance and source is as follows:

User agent stylesheet
Normal rules in user style sheets
Normal rules in author style sheets
Impant ant rules in author style sheets
Impant ant rules in user style sheets
After sorting, if a CSS rule has a higher priority than all other competition rules, the algorithm ends and the value specified by the highest priority is returned. If multiple CSS rules have the highest priority, they will continue to compete and the algorithm will enter step 1.

3. sort by Specificity

CSS calculates the special value of selector for each rule specified in multiple rules. The higher the value, the higher the priority.

A special value is an array-like value consisting of four integers: a, B, c, and d. The weight of a is the highest, and so on. The weight of d is the lowest. The selector special value is calculated as follows:

If the rule is an inline style, a = 1
If this rule is specified by selector, the number of id selector displayed in selector is the value of B.
If this rule is specified by selector, the total number of attributes selector (including class selector) or pseudo class selector in selector is the value of c.
If this rule is specified by selector, the total number of selector elements or pseudo-element selector in selector is the value of d.
The special value of universal selector * is 0, 0, 0
The official website provides some examples for further understanding.

When sorting based on special values, because a has the highest weight, compare a first, in the case of the same AAS, in comparison with B, and so on. Therefore, no matter how big the values of B, c, and D are, inline style always has the highest particularity.

If a CSS rule has a higher priority than all other competing rules after sorting based on the preceding Special rules, the algorithm ends and returns the value specified with the highest priority. If multiple CSS rules have the highest priority, they will continue to compete and the algorithm will enter step 1.

4. Compare the sequence of CSS rules in the document

The statement that appears after is always given a higher priority than the statement that appears before. Therefore, the statement that appears at the end is used as the value of this attribute.

So far, the algorithm has ended. I am completely dizzy.