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

This article focuses on "what are the criteria for measuring priority in css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the criteria for measuring priority in css.

I. background

CSS has three characteristics: cascading, inheritance and priority.

When we define styles for CSS, there are often two or more rules applied to the same element. Which rule is applied to the final effect of this element in the browser? This depends on the question of priority.

CSS priority is measured by CSS weights. There is a set of formulas for calculating weights, which are as follows:

Use a 4-digit string to represent the level, from left to right, the left is larger, descending to the right, and there is no binary between digits, and the levels are insurmountable. There is no binary meaning: even the weight of 10 tags will not be greater than the weight of the class selector, and so on, the weight of the ten class selector is also less than that of the id selector.

Contribution value of inheritance or * 0pl 0pl 0p0pl 0

The contribution value of each element (tag) is 0pm 0j0j0pl 1

The contribution value of each class and pseudo class is 0, 0, 0, 1 and 0.

The contribution value of each ID is 0pm 1pm 0pm 0

The contribution value of each inline is 1, 0, 0, 0, 0.

Each! important infinity

2. an example of calculating the weight

Take the following code as an example:

one

two

three

four

five

six

First, give li the following styles:

Divulli {/ * the weight of this selector is 0memo 0j0jin3pm /

Width:200px

Height:30px

Border:1pxsolid#000

Background-color:pink

}

Weight of tag selector

The selector pulli is a descendant selector, and the weights of the three tags are all (0pc0p0p0pl 1). Because it is the same level selector, the weights can be added, and finally the weight of pulli is (0pc0p0p0p0p3).

At this point, I believe you have a deeper understanding of "what are the criteria for measuring priority in css?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.