Home > Developer > Web Develop
This article explains the details of CSS specificity (CSS specificity), which is the weight calculation of CSS style selectors.
By calculating the weight of the selector (weight), it ultimately determines which selector will take precedence over the styling of the other selector, which is "priorityrules"!
First, let's take a simple example:
<Body> <ulID= "Summer-drinks"> <Liclass= "Favorite">First section</Li> <Li>Second section</Li> <Li>Third section</Li> </ul></Body>View Code
Set Style:
<style>ul#summer-drinks Li{Font-weight:Normal;font-size:12px;Color:Black; }. Favorite{Color:Red;Font-weight:Bold; }</style>View Code
：
And then look at the effect we found that the effect is not what we want, we favorite column text is not red and bold, there must be something unexpected here, notice below we can know, our trouble appears here:
Ul#summer-drinks li { font-weight:normal; font-size:12px; Color:black; }Two different CSS selectors set the color and font-weight of the text at the same time, but only the font-size is declared once, so we can see the effect very clearly. For conflict, the browser must make a selection and which selector style will eventually produce the effect. It also leads to the following series of rules for standard specificity (that is, weight precedence)
Calculate the value of the CSS style selector priority
First look at the actual selector foot color to play priority:
Here is the setting of our image:
1. If the element has an inline style (inline style), then give the inline style 1000 points for example:
2, for each ID, we give him 0100 points for example: #div
3, for each class, Pseudo-Class (pseudo-classes) or attribute selector, we give him 0010 points for example:. Classes,[attributes] and: Hover,:focus
4, for each specific tag element reference and pseudo-element (pseudo-elements), we give him 0001 points for example:: Before and: after
Here the number you can be seen as a general number of numbers or something, for example, 0100, can be regarded as 100, but the following use of image points but with 0100
The following examples illustrate:
Example one:
Ul#nav li.active a
Example two:
Body.ie7. Col_3 H2~H2
Example three:
#footer *:not (NAV) Li
Note:": Not ()" itself has no weight value (here the weight value refers to the above points, like 0100), only the weight value in parentheses!
Example four:
<li style= "color:red;" >
Example five:
UL > Li ul li ol li:first-letter
Example VI:
A:
Div#demo{background-image:url (n.gif);}
B:
Div[id= "Demo"]{background-image:url (N.gif)}
Code:
<!DOCTYPE HTML><HTML> <Head> <style>Div{Height:100px;width:100px; }Div#demo{background:Red; }div[id= "Demo"]{background:Green; } </style> </Head> <Body> <DivID= "Demo"></Div> </Body></HTML>View Code
：
Here you can verify thatthe weight in a case is higher than the weight in B, that is, the weight of the ID selector is higher than the attribute selector weight.
Key notes:
1, * The selector does not have the weight value, of course, we can image set his weight value of 0000 points
2, we set the pseudo-element (for example: ": First-line") weight value of 0001 points, and set pseudo-class weight value of 0010 points
3, Pseudo-class ": Not ()" itself does not count the weight value, and in its parentheses corresponding to set the weight value
4, "!important" more advanced, weight than inline style weight is also high, his style settings can cover the style of inline style, of course, we can use the same "!important" to set different styles to cover the previous "!important" style set (need to know Tao, in the same style file, when the same selector declares the style multiple times, is the later declaration of the style that is the most recently declared overwrite the previously declared style), here we can also set the image of "!important" weight value of 10,000 points
5. The ID selector weight is higher than the attribute selector weight One example: Example Six
Reference article:
Chris Coyier's specifics on CSS specificity
Vitaly Friedman CSS Specificity:things you should Know
At this point, the CSS selector to set the priority of the style calculation is finished, if the writing is not good you can add in the comments ~ ~
Thank you ~
CSS specificity (CSS specificity) details of CSS style weights calculation and understanding (CSS style overlay rules)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
