Details of CSS Specificity: Calculation and Understanding of CSS Style Weights (CSS Style Override Rules)_html/css

Details of CSS Specificity: Calculation and Understanding of CSS Style Weights (CSS Style Override Rules)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:26

Original

1227 people have browsed it

This article explains the details of CSS Specificity, that is, the weight calculation of CSS style selectors

Finally determine which selection to make by calculating the weight of the selector The selector will get priority to override the style settings of other selectors, that is, the "priority rules"!

First, let’s take a simple example:

<body>    <ul id="summer-drinks">       <li class="favorite">First section</li>       <li>Second section</li>       <li>Third section</li>    </ul></body>

Copy after login

Set the style:

<style>    ul#summer-drinks li {        font-weight: normal;        font-size: 12px;        color: black;    }    .favorite {        color: red;        font-weight: bold;    }</style>

Copy after login

Screenshot:

Then looking at the effect, we found that the effect was not what we wanted, and the text in our favorite column did not turn red. and bold, something unexpected must have happened here. Pay attention to the following and we can know that our trouble appears here:

    ul#summer-drinks li {        font-weight: normal;        font-size: 12px;        color: black;    }

Copy after login

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 clearly see the effect. For "conflicts", the browser must make a choice which selector style ultimately takes effect. This also leads to the following series of standard specificity (i.e. weight priority) rules

Calculate the "value" of CSS style selector priority

Take a look first The actual selector role play priority:

Here we set the image:

1. If the element has an inline style (inline style), then give the inline For example:

2. For each ID, we give it 0100 points. For example: #div

3. For each Class, pseudo-classes or attribute selector, we give it 0010 points. For example: .classes, [attributes] and :hover, :focus

4. For each specific tag element For references and pseudo-elements, we give them 0001 points, for example: :before and :after

You can think of the numbers here as general number counting, such as 0100, which can be regarded as 100. Just use the image point below instead of 0100

The following example illustrates:

Example 1:

　ul#nav li.active a

Example 2:

　body.ie7 .col_3 h2~h2

Example 3:

　　　#footer *:not(nav) li

Note: " :not() " It has no weight value (the weight value here refers to the number above, like 0100), only the weight value in the brackets!

Example 4:

🎜>

　 ul > li ul li ol li:first-letter

Example 6:

A: div#demo{background-image:url(n.gif);}

div[id="demo"]{background-image :url(n.gif)}

Code:

Screenshot:

<!DOCTYPE html><html>    <head>        <style>            div{                height:100px;                width:100px;            }            div#demo{                background:red;            }            div[id="demo"]{                background:green;            }        </style>    </head>    <body>        <div id="demo"></div>    </body></html>

Copy after login

Available here It is verified that: the weight in case A is slightly higher than the weight in case B, that is, the weight of the ID selector is higher than the weight of the attribute selector

Important note:

1. The * selector has no weight value. Of course, we can set its weight value to 0000 points.

2. We set the weight value of the pseudo element (for example: ":first-line") to 0001 points. , and set the pseudo-class weight value to 0010 points

3. The " :not()" itself in the pseudo-class does not count the weight value, but the weight value in its brackets is set accordingly

4. "!important" is more advanced and has a higher weight than inline styles. Its style settings can override the styles of inline styles. Of course, we can use the same "!important" to set different styles. Override the style set by the previous " !important " (you need to know here that when the same selector declares the style multiple times in the same style file, the style declared later, that is, the latest declared style overrides the previously declared style), here we also You can vividly set the weight value of " !important " to 10000 points

5. The weight of the ID selector is a little higher than the weight of the attribute selector. For example: as in Example 6 above

Reference articles:

Chris Coyier’s Specifics on CSS Specificity

Vitaly Friedman’s CSS Specificity: Things You Should Know　

At this point, the CSS selector sets the priority of the style. The calculation is over. If the writing is not good, you can add it in the comments~~

Thank you~~