Css priority analysis

Original address: http://www.denisdeng.com /? P = 165
This article is excerpted from The book The Ultimate CSS Reference. If you have any shortcomings in translation, please make sure that you have an ax. Refer to The original book: specificity.

Beginners may not understand the concept of priority, but we often encounter these problems when writing css. The priority is mainly to avoid conflicts in the style declaration. When there are multiple declarations for the same attribute of the same element, and these declarations have the same source and weight, more explicit css declarations will take the dominant place.

Imagine the following example:Copy content to clipboard
Code:

P{
Color:black;
Background-color:white;
}
div.warning p{
color:red;
}
Div#caution p{
Color:yellow;
}
Body#home div p{
Color:white;
}

The style sheet above contains four styles for p elements. They all contain a color declaration. The Browser needs to clarify that the Declaration will be applied eventually, what is the final color of the p element?

The answer is simple. The most explicit selector declaration will prevail. The browser analyzes the selector's priority and finally filters out the statements with the highest priority.

The following is a comparison of multiple declarations of the same selector:

• If the attribute of an element is declared in the style of an element, rather than in the selector, it has the highest priority. If no inline attribute exists, go to step 2;
• Calculate the ID of the selector. The highest priority is the number of IDs. If the total number of IDS is the same or the value is 0, go to step 3;
• Calculation class attributes (such as. test), attribute selectors (such as [type = 'submit ']), and pseudo classes (such as hover ). The highest quantity has a relatively high priority. If the total number is the same or is 0, go to the next step;
• Calculate the number of Type selectors (such as div) and pseudo elements (such as: first-letter). A high total has a high priority.

If multiple selectors have the same priority, the rule of Cascading Style Sheets is: the lower-end prevails.

W3c describes the calculation priority method. The calculation result is expressed by a, B, c, and d matrices separated by four commas. a indicates the highest priority, and d indicates the least priority, the calculation process is as follows:

• Declare from style, a = 1;
• B. count the number of IDs;
• C. count the number of attribute selectors and pseudo classes;
• D. count the number of Element Types and pseudo-class elements.

The calculation result is not a specific value, but a matrix that can be compared with each other. Let's look at a statement in the previous example:Copy content to clipboard
Code:

P{
    Color:black;
    Background-color:white;
}

According to the above formula, we get 0, 0, 1, because only one element type is available.

As mentioned above, this is not a numerical value, but a matrix. a indicates the highest priority, and d indicates the lowest priority. From left to right, a is compared to the highest value in each column, the values in column B overwrite the values in c and d, regardless of the values in c and d. In this way, the priority of 0, 1, 0, and 0 is higher than that of 0, 0, 10, and 0.

We split the computing steps to make it easier to understand.

First, calculate a. If its attribute is defined in the style of an element, its value is 1; otherwise, it is 0. In fact, there is only one case for the value of column.

As you can see, the priority of inline styles is 1, 0, 0, and 0, for example, reference:

<P style = "color: red;"> red text </p>

This is why I want to avoid using inline styles whenever possible, because inline styles always have the highest priority and the only way to change them is to use them in css! Important Declaration.

In addition to inline styles, We need to calculate B, c, and d. Take a look at the Priority Calculation of the following rule:Copy content to clipboard
Code:

Body#home div#warning p.message{color:red;}

The above rule defines the color attribute. Since there is no inline style, column a = 0, as shown in the following table:

Calculate the value in column B and count the number of IDs. In the selector above, there are two IDs: # home and # warning. B = 2, as shown in the following table:

Next, calculate the value in Column c and count the number of class selectors, attribute selectors, and pseudo classes. (Note: [id = "foo" and # foo are different])

In the selector above, there is a class selector. message, so c = 1, as shown in the following table:

Finally, d is used to calculate the number of Type selectors and pseudo classes. There are three in the selector: body, div, p, and no pseudo class elements. Therefore, d = 3, as shown in the following table:

In this case, let's look at a more complex example. There are more than one color attribute for the same element. The following is how the browser handles the style sheet:Copy content to clipboard
Code:

p.message{
color:green;
}
#home #warning p.message{
color:yellow;
}
#warning p.message{
color:white;
}
body#home div#warning p.message{
color:blue;
}
p{
color:teal;
}
* body#home>div#warning p.message{
color:red;
}
#warning p{
color:black;
}

Use the above method to analyze this style sheet. Wait. What is the priority of the common selector "*" and sub-Selector ">? The answer is that he has no priority and will be ignored. You can treat it as 0.

Whether you have analyzed the priority of the selector before looking at the following results.

The result is arranged according to the priority: the highest is the top, and the lowest is the bottom. You will see that the top two levels are the same, although it has a common selector and a sub-selector. In this case, the latencies will prevail. If you use the above style on the page, you will see that the text font of the p element will make it red.

You will also see that the priority of p. message is lower than # waring p. This is a problem that beginners often encounter. They think that the class selector matches an element more specifically.