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

This article mainly introduces the relevant knowledge of what the weight of CSS selector is, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will gain something after reading this CSS selector weight article, let's take a look at it.

Weight of selector

Weight is the style of which selector I should choose if I have multiple selectors for the same element.

# p {background: red;} .p {background: skyblue;} p {background: green;} line style

The style of id

The style of class

Style of p label

From the above comparison, we can see that inline style > id selector > class selector > tag selector > wildcard

So is it possible to make the tag selection larger than all the selectors? the answer is yes, as long as you add this line of code! important, the weight of any selector is infinite.

# p {background: red;} .p {background: skyblue;} p {background: green! important;} * {background: brown} inline style

The style of id

The style of class

Style of p label

Type of selector

ID selector # id

Class selector .class

Tag selector pfocus div, etc.

Property selector [type= "text"]

Universal selector *

Pseudo-class selector: hover

Pseudo element selector:: before

Sub-selector, adjacent selector

Weight of selector

First class: the inline style is 1000. Although the inline style is not included in the selector, it has the highest weight.

Second class: id selector is 100

Third: class selector, pseudo-class selection. Attribute selector, attribute selector 10

Fourth class: tag selector and pseudo element selector 1

The weight of the other selector is 0

Inherited styles have no weight

If the level is the same, then the final style overrides the previous style

Finally, remember! the weight of important is infinite.

Calculation of weight

Add up the weights of the selector

Body input {color: blue;} input {color: red;}

The final style is the text is blue

Because the weight of body input is 2, the weight of each is 1, so it adds up to 2.

# id .input input {color: yellow;}

The weight above is 100 + 10 + 1 = 111.

This is the end of the article on "what is the weight of the CSS selector?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the weight of CSS selector". If you want to learn more knowledge, 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.