Css3 selector weight (Part 2), css3 Selector

Css3 selector weight (Part 2), css3 Selector

In this blog post, I personally think that this is an important knowledge point in css knowledge. This problem is often encountered during the development process, especially when you use the framework, some labels of some frameworks have some default styles. Therefore, we can add weights to make the Style Effective. Since we talk about weight, we must talk about the weight level and weight value.

Css weight levels can be divided into five levels:

1. level 1: inline styles. We all know in detail what an inline style is. This is not only used to add a style attribute to a tag. <div> the weight value is 1000, but this type is rarely used during development, the recommended method is to write css, js, and html as separate files. This looks neat and easy to manage.

2. Level 2: ID selector. The id selector is selected starting with "#". You should understand that the weight of this selection method is 0100.

3. Level 3: class selector. The class selector is a selector starting with ".". The weight of this selection method is 0010.

4. Level 4: The tag selector and pseudo-class selector directly use the tag or pseudo-class selector. the weights of these two options are 0001.

5. the general selector (*), sub-selector (>), and adjacent compatriot selector (+) have no weight, that is, the weight is 0000, although there is no weight, it is higher than the weight of the inherited style. It is worth reminding that not all pseudo-class selector weights are I, and there are always some children in the leading family, such as a: link,: visited pseudo-class selector has a higher weight than the third-level class selector.

Here we should remind you that the weight here is not in decimal order, but it can be used as a decimal place for comparison.

Case

Test Results

Here, the weight of p. c is 0011, and the weight of. c is 0010, so the font displays blue

Of course, the same is true if you choose from top to bottom layers.

Test Results

The weight here is the same as the weight above. The weight of div. c is 0011, and the weight of. c is 10.

Case (test pseudo-class selector)

Test Results

No, right? I didn't lie.

In fact, the weight calculation method is similar.

Blog Post will talk about the most weighted things. This guy is not only the son of the leader, but also the prince. This is

! Important

You are not mistaken. It's the one upstairs! Important, he can increase the weight of the style you want to present more than the intra-row style. I will give an example to illustrate his usage.

Running result

The inside style is clearly used, but green is displayed, as if wearing a green hat.

However, this is the weight of the style, not the weight of the selector, that is, it does not conflict with the weight of the selector mentioned above, but it can change some styles you want to change.

Okay. The content above is about the weight of css3.