Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.