Weights and precedence rules for CSS selectors

In CSS, the order of the defined style rules is determined according to the particularity of the selectors, and rules with more special selectors take precedence over rules with general selectors, if the two rules are of the same specificity, Then the rules that are defined in the first precedence we often encounter this situation when using CSS to define styles for page elements: apply generic styles to generic elements, and then overwrite them on more specific elements. So how do we make sure that our newly defined element style overrides the original style on the target element?

In CSS, the order of the defined style rules is determined according to the particularity of the selector, and the rule with the more special selectors takes precedence over the rule with the general selector, and if the two rules are the same, then the rules that are defined first take precedence.

So, how to calculate the particularity of the selector? The following diagram describes the specific calculation method:



We divide the particulars into 4 levels, each of which represents a class of selectors, each of which is multiplied by the number of selectors represented by that rank, and finally the values of all levels are added to the special values of the selectors.

The 4 levels are defined as follows:

First: Represents the inline style, such as: style= "", the weight value is 1000.
Second: Represents the ID selector, such as: #content, the weight value is 100.
Third class: Represents classes, pseudo-classes, and attribute selectors, such as. Content, with a weight of 10.
Class IV: Represents a type selector and a pseudo-element selector, such as P p, with a weight of 1.

For example, where #nav is a second-level selector,. Active is a third-class selector, with UL, Li and a four selectors. The value of the specificity of the entire selector expression is 1*100+1*10+3*1=113

Here are some examples of calculations:



Note: the Universal selector (*), the child selector (>) and the neighboring sibling selector (+) are not in these four levels, so their weights are 0.
Let's look at a specific example: if you have the following group style rules, can you tell what color the two headings in the HTML code are?

#content p#main-content h2{       color:red;   }   #content #main-content>h2{       color:blue}   body #content p[id= "main-content"] h2{       color:green;   }   #main-content p.paragraph h2{       color:orange;   }   #main-content [class= "paragraph"] h2{       color:yellow;   }   P#main-content p.paragraph h2.first{       color:pink;   }

Here is the HTML code:

<p id= "Content" >    <p id= "main-content" >        

Have you judged it? The answer is: The two headings are all red!
Let's figure out the values of the respective peculiarities of the six style rules:
The value of the first particularity =2*100+2*1=202
The value of the second particularity =2*100+1=201
The value of the third particularity =1*100+1*10+3*1=113
The value of the fourth particularity =1*100+1*10+2*1=112
The value of the fifth particularity =1*100+1*10+1*1=111
The value of the sixth particularity =1*100+2*10+3*1=123
Clearly, the first style rule with its high score of 202 won this time the style Selector Special Contest champion, some of the rules, although it seems more complex, but the special is not to spell whose selector expression is written longer, ID selector is the king!
It is important to understand the specificity of selectors, especially when fixing bugs, because you need to know which rules are first and why.
If you encounter a CSS rule that doesn't seem to work, it's likely that there is a special conflict. Add the ID of one of his parent elements in your selector to make it more specific. If this solves the problem, it means that the stylesheet is likely to have more specific rules elsewhere, and it overrides your rules. If this is the case, you may need to check the code to resolve the specific conflict and make the code as concise as possible.