CSS cascading mechanism using detailed

This time to everyone to bring CSS cascading mechanism using the detailed, CSS cascading mechanism to use the attention of what, the following is the actual case, together to see.

Why there is a cascading mechanism in CSS

Because there may be multiple styles in the CSS that affect a property of the same element at the same time, the cascading mechanism solves the style conflicts between the author (the person who wrote the code), the user (the person who browsed the page), and the user agent (generally referred to as the browser).

Each style rule has a weight value in the cascade, and the rule with the highest weight takes precedence when several of the rules are in effect at the same time. In general, the author specifies that the style weight value is higher than the user style weight value, and the user style weight is higher than the client (user agent) weight value. General weight value with object, whether there is! Important, specificity and position successively related. In the stacking order, the following weights are small to large

(1) User-agent style

(2) General user style

(3) General style of the author

(4) Author important style (! Important

(5) User-critical style (!) Important

(6) If two styles come from the same code, as both from the author (code), and their style declarations are equally important, the specificity is calculated according to the specificity of the lower specificity of the

(7) If the specificity is also the same, the more backward the style priority is higher

The reason why user-set important styles take precedence over the author's important style is to make it easier for users to implement special requirements, such as resizing the page font.

The calculation of selector specificity

(1) If a declaration appears in the style attribute of the element, A is counted as 1;

(2) b equals the number of all ID selectors in the selector combined with

(3) c Equals all class selectors and attribute selectors in the selector, as well as the number of pseudo-class selectors added together and

(4) d equals the number of all tag selectors and pseudo-element selectors in the selector combined with

A-b-c-d is the specificity of the selector, comparing the order from a before, who first big priority is higher.

Attention:

1. Inheritance has the lowest priority, no specificity

2. binding (e.g. +,>) and Universal selector (*) specificity of 0

. box{}///specificity =0,0,1,0*/.box p{}/* specificity =0,0,1,1*/#nav li{}/* specificity =0,1,0,1*/p:first-line{}/* specificity =0,0,0,2*/style= ""/* specificity = 1,0,0,0*/

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Specific analysis Webpack style loading

20 CSS code usage precautions in front-end combat project