Weights and precedence rules for CSS selectors

Source: Internet
Author: User

Weights and precedence rules for CSS selectors
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.

Weight priority from the style selector: important > Inline style > ID > class > tags | Pseudo Class | Property selection > Pseudo objects > Inheritance > wildcard characters.
The weight of the important is 1000.

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.

Note: the Universal selector (*), the child selector (>) and the neighboring sibling selector (+) are not in these four levels, so their weights are 0.
Calculation examples

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


Here is the HTML code:

<div id= "Content" >
<div id= "Main-content" >
<H2>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" >
<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>
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, resolve the specific conflict, and make the code as concise as possible

CSS selector weights and precedence rules (GO)

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.