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:
.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. |
<<: Analysis and solution of a MySQL slow log monitoring false alarm problem
>>: HTML form tag tutorial (3): input tag
Table of contents Prerequisites useEffect commitB...
How does "adaptive web design" work? It’...
Preface Let me explain here first. Many people on...
1. Execute the select statement first to generate...
The first cutter in China github.com/chokcoco Fir...
Prerequisites: Docker is already installed 1. Fin...
A few days ago, I found that the official version...
As of now, the latest version of CentOS is CentOS...
Simulation tables and data scripts Copy the follo...
background Today, while cooperating with other pr...
Table of contents 1. Primary key exists 2. No pri...
1. Download 1. Download the installation package ...
This article shares the specific code of jQuery t...
The javascript function for converting <table&g...
Today at work, a friend I added temporarily asked ...