Parsing of cascading mechanisms in CSS

This article mainly introduces the CSS cascade mechanism of the relevant information, cascade mechanism can solve the author (writing Code of the person), the user (browse the page) and the user agent (generally referred to as the browser) style conflicts, now share to everyone, but also for everyone to do a reference.

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*/

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!