Weights and precedence rules for CSS selectors

Weights and precedence rules for CSS selectorsWord 1105Read 0Reviews 0like 0

We often encounter this 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.

4个等级的定义如下： 第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为100。 第三等：代表类，伪类和属性选择器，如: .content，权值为10。 第四等：代表类型选择器和伪元素选择器，如: div p，权值为1。

For example, the example above, where #nav is a second-class 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 1100+110+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 Div#main-content H2{  color:red;} #content #main-content>H2{  color:Blue} body #content div[id="Main-content"] h2{color:green;}  #main-content Div. Paragraph H2{  color:orange;} #main-content [class= "paragraph"] H2{  color:yellow;} Div#main-content Div. Paragraph H2. First{  color:pink;}

<div id="Content"> <div id="Main-content"> <h2>Introduction to CSS</H2> <p>CSS (cascading style Sheet, which can be translated as cascading style sheets or cascading style sheets), is a set of formatting rules that govern the appearance of web pages.</P> <div class="paragraph"> <h2 class="First">Advantages of using CSS layouts</H2> <p>1, Performance and content separation 2, improve page browsing speed 3, easy to maintain and revision 4, the use of CSS layout more in line with the current standards.</P> </div> </div> </div>

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! [Actually it's good to use the class selector]
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.

Weights and precedence rules for CSS selectors