CSS specificity (CSS specificity) details of CSS style weights calculation and understanding (CSS style overlay rules)

Source: Internet
Author: User

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

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)

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.