The precedence algorithm when CSS rules Cascade _ Experience Exchange

Source: Internet
Author: User
inline style
embeded style
External style
User Style
The inline style is ugly, and they travel through HTML documents, twisting together with HTML elements, creating a lot of trouble for web front-end developers. They often appear in the same guise:

This is a paragraph.


Embeded style is a bit more than an inline style gentleman, they are also hosted in HTML documents, but they don't like to twist the HTML elements into a group. They tend to
External style is a nobleman, it does not want to stay with the HTML, so simply as an external file in the form of independent existence. Usually we use Elements or @import statements to import them into HTML.


We should use the external style as much as possible, I think there are many reasons, as we all know, I will not repeat it.

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

Now that we have so many ways to add style, it's hard to avoid cascading the styles. Such as:

This is a paragraph.


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

p{
Color:yellow;
}
We even have the class= "Intro".

Elements are applied:

p.intro{
Color:blue;
}
This allows us to have multiple CSS rules specifying values on the same attribute color of the same element. This condition is called cascading (cascading). When the cascade occurs, the CSS parser will determine the final selected value based on the priority algorithm.

Priority algorithms consider the following three aspects in order of precedence:

The importance and origin 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 a property of an element, list all CSS rules that specify a value for the attribute. In the example above, the class= "Intro"

element, there are three CSS rules that specify the color property.

2. Priority ranking according to the importance and source of the Declaration

There are two kinds of importance:

Important
Normal (i.e. non-important)
Adding a!important after a CSS rule is more important than not being added.

There are three types of sources:

User Agent stylesheet– Browser default style
Author stylesheet– developer-defined styles
User stylesheet– defines the style in the browser
Priority ordering of importance and origin from low to High is:

User Agent Stylesheet
The normal rule in user style sheets
Author The normal rule in style sheets
Author the important rules in style sheets
Important rules in user style sheets
After sorting, if one of the CSS rules has precedence over all other competition rules, the algorithm ends and returns the value specified by the highest priority. If more than one CSS rule has the highest priority, then they will continue to compete, and the algorithm enters the 3rd step.

3. Sort by particularity (specificity)

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

The particularity value is a value of a similar array consisting of 4 integers: a,b,c,d, where A has the highest weight, and so on, and D has the lowest weight. Selector the specific value of the calculation method is:

If the rule is an 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
If the rule is specified by selector, the sum of the attributes selector (including class selector) or pseudo-class selector that appear in selector is the value of C
If the rule is specified by selector, the sum of the elements that appear in selector selector or pseudo-element selector is the value of D.
The special value of universal selector * is 0,0,0,0
The official website provides some examples to deepen your understanding.

When sorting according to the particular value, because a has the highest weight, first compare a, in the same case, in the comparison B, and so on. So no matter how large the B,c,d value is, the inline style always has the highest specificity.

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

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

The post-occurrence is always higher priority than the one that appears before, so the last statement that appears will be used as the value of the property.

At this point, the algorithm ends. I was completely dizzy.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.