A brief discussion on CSS cascading mechanism

Why does CSS have a cascading mechanism?

Because in CSS there may be multiple styles that affect a certain property 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 browsers).

Each style rule in the cascade has a weight value. When several of these rules are in effect at the same time, the rule with the highest 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 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 stacking order, the following weight values ​​are from small to large

(1) User agent style

(2) User general style

(3) Author’s general style

(4) Author important style (!important)

(5) User important styles (!important)

(6) If two styles come from the same code, such as both come from the author (code), and their style declarations are equally important, they are calculated based on specificity, and the one with higher specificity will override the one with lower specificity.

(7) If the specificity is the same, the later the style, the higher the priority.

Why do important styles set by users have higher priority than important styles set by authors? The reason for this is to facilitate users to achieve some special requirements, such as adjusting the page font size.

Calculation of selector specificity

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

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

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

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

abcd is the specificity of the selector. The comparison order starts from a, and the larger one has a higher priority.

Notice:

1. Inherited has the lowest priority and no specificity
2. The specificity of the combiner (such as +, >) and the universal selector (*) is 0

.box{} /*Specificity=0,0,1,0*/
.box div{} /*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 full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.