A graphic explanation of the selection weights calculation examples in CSS

First question:

Based on the above code, let's determine what color is "text " in the P statement.

#box1. SPEC2 P This is the first, judging by the weights, we can see that there is an ID selector, a class selector, a tag selector whose weight should be 1,1,1

P p #box3 p This is the second, we can see that there is an ID selector, no class selector, 3 tag selectors whose weights should be 1,0,3

P.SPEC1 p.spec2 P.SPEC3 P This is the third, we can see that there is no ID selector, there are 3 class selectors, 4 tag selectors, weights should be 0,3,4

These three are compared, according to the weight size to choose, the choice is significant, should be the first one, so the "text" color should be red .

The second question:

based on the above code, let's judge the text in the SPAN statement " What color is it?

Look at two selectors and see that two have not reached the span layer, so they are not calculated according to their weights. According to inheritance, the first one is accurate to p, and the second is only accurate to box, according to the nearest principle, should be p relatively close, so the "text" in the span statement is Red .

Question three:

based on the above code, let's judge the text in the SPAN statement " What color is it?

Judging by whether or not it reaches the span level, it is known to be Green .

Question Fourth:

according to the above code, we can judge the "text" in the P statement " What color is it?

According to the comma is the hierarchical selector, so the two parts should be opened to see, and then calculate their weights:

#box1 P.SPEC2 p, its weight is 1,1,2

#box1 #box2 P, whose weight is 2,0,1

#box1 #box3 P, whose weight is 2,0,1

Weight is the same as the nearest principle, it should be the green #box1 #box3 p.

Question Fifth:

according to the above code, we can judge the "text" in the P statement " What color is it?

According to cannot carry, so the judgment is Blue .

Question sixth:

Let's examine the color of the text in the code:

According to the weight comparison, 2,0,0, 1,1,1, 0,2,2 know, should be the first, should be blue .

Question seventh:

Let's examine the color of the text in the code:

The first one is inheritance, the weight is 0;

The second weight is 0,0,1

So it's supposed to be blue .

Question eighth:

Let's examine the color of the text in the code:

Similar to the seventh question, it should be blue.

Question Nineth:

Let's examine the color of the text in the code:

The first weight is 0,0,2

The second weight is 0,0,1

So the color should be blue .

Question Tenth:

Let's examine the color of the text in the code:

Similar to the above, we can know that it is blue .

Question 11th:

Let's examine the color of the text in the code:

The weight of the first one is 1,0,1

The second one weighs 1,0,0.

So it should be the first red one.