Example Analysis of priority in CSS
In this issue, the editor will bring you an example analysis of the priorities in CSS. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.
Calculate priority
The priority is calculated based on a cascading string of each selector type. He is a weight corresponding to the matching expression. If the priority is the same, the lower CSS is applied to the element.
Note: the position of the element in the document tree does not affect the priority
Priority order
List of selectors whose priority increases step by step:
Universal selector (*)
Element (type) selector
Class selector
Attribute selector
Pseudo class
ID selector
Inline style
Type-based priority
The priority is calculated according to the type of selector. In the following example, although the property selector selects an ID, it is calculated according to its type in the priority calculation rule.
There is a style declaration as follows:
CSS
* # foo {
Color: green
}
* [id= "foo"] {
Color: purple
}
Apply it to the following HTML:
XML/HTML
I am a sample text.
Demo example: https://jsfiddle.net/donqi/vmo5m3re/
Selector priority is the same.
If the priority is the same, the later definition will override the previous definition.
XML/HTML
Css:
CSS
Div {height:100px; width:100px; padding:20px; margin:20px; border:10px solid hsla (0% favicon.png 0); background-color:#ccc; background-image:url ("/ favicon.png"); background-repeat:space; background-origin:content-box;} div.box {background-clip:content-box } div.border {background-clip:border-box;} div.padding {background-clip:padding-box;} demo example: https://jsfiddle.net/donqi/wvLpwz48/
The above is an example of the priority in CSS shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.
