Priority algorithm when CSS rules are cascading

the priority of css rules is a concept that web front-end developers must understand. there are four commonly used methods for adding styles.

1. inline style
2. embedded style
3. external style
4. user style

inline style is ugly, they shuttle in html documents, they are tangled with html elements, causing a lot of trouble for web front-end developers. they often appear like this:

<p style="color:red;">this is a paragraph.</p>

embeded style is more gentlemanly than inline style. they also reside in html documents, but they disdain to be tangled with html elements. they often appear in the

<style type="text/css" media="screen"> 
    p{ 
        color : red; 
    } 
</style>

external style is an aristocrat. it does not want to stay with html, so it simply exists independently in the form of an external file. usually we use element or @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. everyone knows it, so i won’t repeat it.

there is also a user style that is slightly different from the above three. if you use ie browser, then you can find and add user style under tools – internet options – general – appearance – accessibility – user style sheet place (forgive me for not having a chinese version of ie browser).

since we have so many ways to add styles, it is difficult to avoid styles cascading. 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 still have the

element of class="intro" is applied:

p.intro{ 
    color : blue; 
}

in this way, we have multiple css rules specifying values ​​​​on the same attribute color of the same element. this situation is called cascading. when cascading occurs, css parser will determine the final selected value based on a priority algorithm.

the priority algorithm considers the following three aspects in order:
1. the importance and source of css rules
2. the particularity of css rules
3. css the order in which rules appear in the document

the algorithm process is divided into four steps:

1. for a certain attribute of an element, list all css rules that specify a value for the attribute. in the above example, on the

element of class="intro", there are three css rules specifying the color attribute.

2. prioritize according to the importance and source of the statement

there are two types of importance:
important and normal (that is, not important)

the importance of adding !important after a css rule is higher than that of not adding it.

there are three sources:

user agent stylesheet – browser default style

author stylesheet – developer-defined style

user stylesheet – user-defined style in the browser

the priority order of importance and source from low to high is:

user agent stylesheet

normal rules in user style sheets

author style sheets normal rules

important rules in author style sheets

important rules in user style sheets

after the above sorting, if there is a css rule with a high priority for all other competition rules, the algorithm ends and the value specified by the highest priority is returned. if there are multiple css rules with the highest priority, they will continue to compete and the algorithm will enter step 3.

3. sort by specificity

css will calculate the specificity value of the selector specified in each rule in multiple rules. this value the higher the value, the higher the priority.

the specialness value is an array-like value composed of 4 integers: a, b, c, d, where a has the highest weight, and so on, d has the lowest weight. the calculation method of selector specificity value is:
if the rule is an inline style, then a = 1
if the rule is specified by selector, the number of id selector appearing in selector is the value of b
/>if the rule is specified by selector, the sum of the number of attribute selectors (including class selector) or pseudo-class selectors appearing in the selector is the value of c
if the rule is specified by selector, the element selector appearing in the selector or the sum of the number of pseudo-element selectors 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 specificity value, since a has the highest weight, a is compared first. if a is the same, b is compared, and so on. therefore, no matter how large the values ​​of b, c, and d are, inline style always has the highest specificity.

if, after sorting according to the above specificity, there is a css rule with a higher priority than all other competing rules, then the algorithm ends and the value specified by the highest priority is returned. if there are multiple css rules with the highest priority, they will continue to compete and the algorithm will enter step 4.

4. compare the order in which css rules appear in the document

things that appear later always have a higher priority than those that appear earlier. therefore the statement that appears at the end will be used as the value of the property.