CSS basics 11: Priority of Selector

CSS basics 11: Priority of Selector

In the basic CSS learning chapter, I started from the fourth blog to talk about selector, which was basically finished yesterday. To sum up today, the selector

Usage: tells the browser which dom element style needs to be set. Finally, an important issue about selector is its priority. Determining priority

The method is to try !!!

Priority of a simple Selector

Simple selector includes the element selector (TAG selector), class selector, and id selector of the fourth, fifth, and sixth blogs.

Let's test:

 

The result is: the highest priority of the id selector.

The result after the id selector is commented out is: the class selector has the highest priority.

Therefore, the priority order of the three simple selectors is: HTML tag attributes> id selector> class selector> element selector.

Second, the priority of the selector of the same type

The same type: indicates a selector of the same type. Theoretically, the priority is the same. For example, div and p .. Btn and. button. # Header and

# Footer, they have the same priority. However, when the selector of the same type applies to the same HTML Tag, the priority is different.

We continue to test:

 

The running result is:

The result of our attempt is: the CSS rule is written at the end to take effect !!

If this is not convincing, let's try again.

What are the different effects?

 

    The running result is:

The final conclusion we come to is: the same type of selector, CSS rules are written at the end to take effect!

Priority of the three Selector

CSS selectors combine many complex selector rules, so we cannot try them one by one as a simple selector. Next we will introduce 1.

A very practical method for determining the priority.

Priority: We agree that the weight of the id selector is 100, the weight of the class selector is 10, and the weight of the label selector is 1. Permission of a complex Selector

The weight is equal to the sum of weights of all selectors. Generally, the more special the selector is, the higher the priority (weight.

Let's first look at two complex selector rules:

The weight of the first selector is: 1 + 10 + 10 + 1 = 22

Div. test. item span {

Background-color: #00FF00;

}

The weight of the second selector is: 100 + 1 + 1 = 102

# Test div span {

Background-color: # FF0000;

}

From our agreed rules, it is obvious that the second rule takes effect!

 

12345 the running result is consistent with our theory!

So we may have a question: Which selector works with the same weight? From a series of theories and experiments, we can conclude that

Type selector has similar priority issues, so we can easily conclude that the same sequence of important weights takes effect.

4! Important

Highest style priority: Ignore the priority and add a semicolon before the last declaration of the style to make the style take effect.

Let's try again:

 

We must know that the result of the first running of the siege class is red, so we are behind the tag selector! Important. Can we see the running result again?

 

 

/* The element selector renders red */div {color: # 0000FF! Important ;}

The running result is:

 

I also learned about the selector priority, and the CSS selector has come to an end !!