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

This article introduces the relevant knowledge of "what is the method of calculating the weights of CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Weight introduction

First of all, what is the CSS weight? The weight of CSS is the relative importance value of the selector, which can also be called weight. This weight determines the priority of the selection rule. In general, there are three main rules for the priority of CSS:

When the weights of 1.CSS are different, the ones with high weights are preferred.

When the 2.CSS weights are the same, the later defined rules take precedence.

3. When adding! important after the CSS attribute, unconditional absolute priority

As long as you know the size of the weight, you can compare it according to the above rules.

Weight calculation

The weight can only be calculated by getting the weight of the basic selector. The weight of the basic selector is as follows:

Level 1 selector: interline style (inline style)

Second level selector: id selector

The third level selector: class selector, pseudo-class selector, attribute selector

Level 4 selector: tag selector, pseudo element selector

Universal selector (*), sub-selector (>), neighboring sibling selector (+) and other selectors: the weight is 0.

(zero weight means that the calculation result is not affected, so it can not be included in the calculation.)

The formula for calculating the weight is: (first level selector * number, second selector * number, third selector * number, fourth selector * number)

Weight comparison

According to the weight calculation formula, a quad is obtained, and the weight is obtained by comparing the size of the quad one by one.

For example, if the result of one weight calculation is (1) and the other weight is (1), the selector to which the first weight belongs is applied.

Case

As shown in the HTML code above, you can select an in the following ways:

The weight of ul#nav li.active an is (0pm 1pm 1pm 3)

The weight of ul li.active an is (0pc0pl 1pl 2)

The weight of ul.nav li.active an is (0rec 0pl 2jp2)

The weight of ul#nav li#first an is (0re2)

If the style is between the lines (that is, the style between the lines), the weight is (1pc0j0pc0pc0)

If a CSS attribute is followed by! important, the weight is maximum.

Summary

1. When comparing weights, compare them sequentially from left to right

two。 In the case of the same weight, the latter gives priority to rendering (that is, style overlay)

3. When adding! important after the CSS attribute, unconditional absolute priority (over inline style).

This is the end of the content of "what is the method of calculating the weights of CSS". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.