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 1. From father to son 2. From s...
HTML5 adds a native placeholder attribute for inp...
As a front-end developer, I can’t avoid IE’s pitf...
This article uses examples to describe MySQL tran...
@vue+echarts realizes the flow effect of China ma...
1. What is Docker? Everyone knows about virtual m...
Preface What is state We all say that React is a ...
If a form field in a form is set to disabled, the ...
There is a task process on the server. When we us...
First, open the virtual machine Open xshell5 to c...
Preface In order to meet the high availability of...
1. Using Selenium in Linux 1. Install Chrome Inst...
1 Download and start Tomcat Go to the official we...
1. Install mutt sudo apt-get install mutt 2. Inst...
Table of contents 1. Introduction 2. On-demand at...