CSS selector perpetual priority and weight

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.

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 Div 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?

Here is the HTML code:

<textarea class="ace_text-input" style="opacity: 0; height: 18px; width: 7px; left: 52px; top: 10px;"></textarea><div id= "Content" >
<div id= "Main-content" >
&LT;H2&GT;CSS Introduction <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" >
&LT;H2 class= "First" > Benefits of using CSS layouts <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 standard .</p>
</div>
</div>
</div>

#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;
}

Have you judged it? The answer is: The two headings are all red!


Let's take a look at the values of the respective peculiarities of the six CSS style rules above:

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.


This article from: http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php

CSS selector perpetual priority and weight