Precedence algorithm for CSS rules cascade

The priority of CSS rules is a concept that Web front-end developers must understand, and there are 4 ways to add styles in common use.

inline style

embeded style

External style

User Style

Inline style is ugly, they travel in HTML documents, and the HTML elements twist into a group, the Web front-end developers caused a lot of trouble. They tend to appear in this way:

Embeded style is a bit more than the inline style gentleman, and they are also hosted in HTML documents, but they disdain to twist the HTML element into a group. They tend to appear in < style> elements:

External style is a nobleman who does not want to stay with HTML, so it simply exists as an external file. Typically, we use the < link> element or the @import statement to import them into HTML.

<link rel= "stylesheet" type= "Text/css" href= "style.css" media= "screen"/>

We should use external style as much as possible, I think there are many reasons, as everyone knows, I will not repeat it.

There is also a User style that is slightly different from the above three, and if you use IE, you can tools–internet Options–general–appearance–accessibility–user style sheet Find the place to add user style (excuse me for not having a Chinese version of IE browser).

Now that we have so many ways to add style, it's hard to avoid styles that create cascading. As：

While using the inline style above, we used the following in our external style:

We've even applied the < p> elements that have class= "Intro":

So we have more than one CSS rule that specifies a value on the same attribute color of the same element. This is known as cascading (cascading). When cascading occurs, the CSS parser will determine the value of the final selection based on the priority algorithm.

Priority algorithms consider the following three aspects in order:

The importance and source of CSS rules

The particularity of CSS rules

The order in which CSS rules appear in the document

The algorithm process is divided into 4 steps:

1. For an attribute of an element, list all CSS rules that specify the value for the attribute. As in the previous example, there are three CSS rules that specify the color property on the < p> element of class= "Intro".

2, according to the importance of the Declaration and the source of priority sorting

There are two kinds of importance:

Important

Normal (that is, not important)

Adding!important after CSS rules is more important than not added.

There are three different sources:

User Agent stylesheet– Browser default style

Author stylesheet– developer-defined styles

User stylesheet– users define styles in browsers

Priority order of importance and source from low to High is:

User Agent Stylesheet

Normal rule in user style sheets

Important rules in author style sheets

Important rules in user style sheets

After sorting, if a CSS rule has precedence over all other competition rules, the algorithm ends and returns the value specified by that highest priority. If more than one CSS rule has the highest priority, then they will continue to compete and the algorithm enters step 3rd.

3, according to the particularity (specificity) sort

CSS calculates the specific value of the selector for each rule specified in multiple rules, the higher the value, the higher the precedence.

A particular value is an array-like value consisting of 4 integers: a,b,c,d, where the weights of A are the highest, and so on, d with the lowest weights. The calculation method of selector particularity value is:

If the rule is a inline style, then A = 1

If the rule is specified by selector, the number of ID selector that appears in Selector is the value of B

Priority is higher than

If the rule is specified by selector, the sum of the attributes selector (including class selector) or pseudo class selector that appears in Selector is the value of C!

If the rule is specified by selector, the sum of the elements selector or pseudo element selector that appears in Selector is the value of D.

The particularity value of universal selector * is 0,0,0,0

The official website provides some examples to deepen understanding.

When sorting according to the particular value, the weight of a is the highest, so the first comparison is between a, the same in a, and then the B, and so on. So regardless of the b,c,d value, inline style always has the highest specificity.

If a CSS rule has precedence over all other competition rules after sorting based on the above particulars, the algorithm ends and returns the value specified by that highest priority. If more than one CSS rule has the highest priority, then they will continue to compete and the algorithm enters step 4th.

4. Compare the order in which the CSS rules appear in the document

The latter is always a higher priority than the previous one, so the statement appearing at the end will be used as the value of the property.