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

This article is about what the principles of selector selection in CSS are. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In CSS, the order of defined style rules is determined according to the particularity of selectors. Rules with more special selectors take precedence over rules with general selectors. If the particularities of the two rules are the same, then later defined rules take precedence.

So, how to calculate the particularity of the selector?

We divide the particularity into four levels, each level represents a class of selectors, the value of each level is the number of selectors it represents multiplied by the weight of this level, and finally add the values of all levels to get the special value of the selector.

The four levels are defined as follows:

1. First class: represents the in-line style, such as: style= "", with a weight of 1000.

two。 Second, it represents an ID selector, such as # content, with a weight of 100.

3. Third: representative classes, pseudo classes and attribute selectors, such as .content, with a weight of 10.

4. Fourth: represents type selector and pseudo-element selector, such as div p, with a weight of 1.

Note: universal selector (*), sub-selector (>), and neighboring sibling selector (+) are not in these four levels, so their weights are all 0.

It's important to understand the particularities of selectors, especially when fixing bug, because you need to know which rules take precedence and why. As for the specific application, we will explain it later.

Finally, let's talk about how to use the selector. There are three principles:

1. Select the label that can be accurately found to control

two。 Use the selector with the most reasonable priority

3. What's more, html and css look simple, beautiful and readable.

Thank you for reading! This is the end of this article on "what is the principle of selector selection in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.