Analysis of the cascading mechanism in CSS

This article mainly introduces relevant information about the CSS cascading mechanism. The cascading mechanism can solve the style conflicts between the author (the person who writes the code), the user (the person who browses the page) and the user agent (generally refers to the browser). Now I share it with you and give it as a reference.

Why is there a cascading mechanism in css

Because there may be multiple styles in css that affect a certain attribute of the same element at the same time , the cascading mechanism can resolve style conflicts between authors (people who write code), users (people who browse pages) and user agents (generally referred to as browsers).

Each style rule in the cascade has a weight value. When several of the rules take effect at the same time, the rule with the largest weight takes precedence. Generally speaking, the style weight value specified by the author is higher than the user style weight value, and the user style weight value is higher than the client (user agent) weight value. General weight value and object, whether there is! important, specificity is related to position. In the cascading order, the following weight values ​​are from small to large

(1) User agent style

(2) User general style

(3) Author general style

(4) Author important style (!important)

(5) User important style (!important)

(6) If two styles come from the same code, such as both From the author (code), and their style declarations are equally important, they are calculated according to the specificity. The ones with high specificity will cover the

with low specificity (7) If the specificity is also the same, the further back The higher the priority of the style

Why the important styles set by the user have a higher priority than the important styles of the author? The reason for this is to facilitate the user to implement some special requirements, such as adjusting the page font size, etc. .

Calculation of selector specificity

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

(2) b is equal to the sum of all ID selectors in the selector and

(3) c is equal to the number in the selector The sum of the sum of all class selectors, attribute selectors, and pseudo-class selectors

(4)d is equal to the sum of the sum of all label selectors and pseudo-element selectors in the selector

a-b-c-d is the specificity of the selector. The comparison order is from a first. Whichever one is bigger first will have a higher priority.

Note:

1. inheritance has the lowest priority and has no specificity

2. combining characters (eg, >) and The specificity of the universal selector (*) is 0

.box{} /*特异度=0，0，1，0*/
.box p{} /*特异度=0，0，1，1*/
#nav li{} /*特异度=0，1，0，1*/
p:first-line{} /*特异度=0，0，0，2*/
style="" /*特异度=1，0，0，0*/

The above is the entire content of this article, I hope it will be helpful to everyone's study , please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Analysis of percentage problems in CSS

The above is the detailed content of Analysis of the cascading mechanism in CSS. For more information, please follow other related articles on the PHP Chinese website!