Priority Algorithm for CSS rule cascade-from http://www.lunaticsun.com/article/cascading-style

CSSRule priority is a concept that Web Front-end developers must understand. There are four common methods to add styles.

• 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<style>Element:

<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<link>Element or@importStatement 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 haveclass="intro"Of<p>Elements applied:

p.intro{    color : blue;}

In this waySame attribute on the same elementcolor, With multiple CSS rules specified value. 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:

1. The importance and source of CSS rules
2. Special Characteristics of CSS rules
3. 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 exampleclass="intro"Of<p>Element, three CSS rules specifycolorAttribute.

2. Sort priorities based on declared importance and sources

There are two importance types:

• Important
• Normal (non-important)

Add after CSS rules!importantIs more important than not added.

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:

1. User Agent stylesheet
2. Normal rules in user Style Sheets
3. Normal rules in author Style Sheets
4. Impant ant rules in author Style Sheets
5. 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.
• Universal Selector*The special values are 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.