Two ways to understand CSS priority

Method 1: Adding values

Let's go to MDN to see the official explanation:

How is priority calculated?

The specificity is a weight assigned to a given CSS declaration, determined by the value of each selector type in the matching selectors.

When the priority is equal to the priority of any of the multiple CSS declarations, the last declaration in the CSS will be applied to the element.

Priority only matters when there are multiple declarations for the same element. Because every CSS rule that acts directly on an element always takes over

over) Rules that the element inherits from an ancestor element.

We get a very important message from the above description: Weight

Let's look at the selector priority relationship again: ID selector > class selector = attribute selector = pseudo-class selector > tag selector = pseudo-element selector.

It seems that the truth is about to come out.

We just need to set a weight value for different types of selectors, and then add them up according to the number of selectors, and it is easy to get the priority, for example:

The weight of the ID selector is set to 1000

The weights of class selectors, attribute selectors, and pseudo-class selectors are set to 100

The weight value of tag selectors and pseudo-element selectors is set to 10

We can quickly calculate the weight of the following CSS and make the correct judgment.

//Weight value 1110
#app .menu .item{}
//Weight value 210
.menu.menu .item{}
//Weight value 30
.item.item.item{}

But. . . If you are careful, you may find that as long as there are enough low-priority selectors (for example: .item...x200 {} ), the low-priority weight value can exceed the high-priority weight value, but the actual effect is still based on the high-priority style. When this happens, the current method of calculating weights may not be able to explain it!

Of course, this can be explained by limiting the maximum number of selectors and increasing the weight value of the selector, but I always feel that this is not a good way to implement it.

Method 2: Bit storage

We assume that the weight value is stored in an unsigned int variable, so the bit position of the variable has a total of 32 bits (4 bytes). We expand it from the high bit by byte as follows:

Byte 1: 00000000

Byte 2: 00000000

Byte 3: 00000000

Byte 4: 00000000

Corresponding to bytes and selectors:

Byte 1: 00000000

Byte 2: 00000000; ID selector

Byte 3: 00000000; class selector, attribute selector, pseudo-class selector

Byte 4: 00000000; tag selector, pseudo-element selector

The number of selectors of the same type is directly added and filled into the specified byte.

Example 1:

#app .menu .item{}

The obtained weight value bit is as follows:

The result is: 65793

Example 2:

.menu.menu .item{}

The obtained weight value bit is as follows:

The result is: 513

Example 3:

.item.item.item{}

The obtained weight value bit is as follows:

The result is: 3

In the above example, the median storage capacity is only 8 bits, so the maximum limit of the selector is 255. Of course, we can increase the bit position to increase the maximum value of the selector.

Summarize

Here are two ways to understand CSS priority. Which one do you think is more suitable for you?

Friends who are interested can leave a message to the editor and tell us your thoughts.