Comparison of cascading and weight in css, css cascade weight

Comparison of cascading and weight in css, css cascade weight

If the same tag is selected by multiple selectors, and each selector sets the same style, who will listen to this style when loading it in the browser?

For the same style set by different selectors, only one style will be selected for loading and will not be superimposed.

To solve the problem of listening, introduce the concept of cascade.

Cascade: Multiple selectors select the same tag and set the same style. When loading in the browser, all attribute values are not loaded, and one of them is selected for loading, one of these values cascade/overwrite other values.

 

To achieve cascade or overwrite, a comparison is involved. The following compares the weights of selector. There are two conditions for weight comparison: 1. the selector selects the label; 2. No tag is selected for the selector.

First, let's talk about the selector's weight: id> class> tag> * (wildcard );

① The selector selects the label:

First, if all labels are selected, compare the selector weights.

The selector has a weight. If the weight is large, the selector has a smaller weight.

Weight calculation: the larger the selector selection range, the smaller the weight. Id> class> label> *

Method: Compare the number of IDS, the number of classes, and the number of labels.

Labeling order in the image (number of IDS, number of classes, number of labels) Style displayed on the page:

Console display:

 

Second, if the selector weights are the same, compare the code writing sequence in css.

The css Code has the loading order. It is loaded from top to bottom, and the subsequent loading will overwrite the previous loading.

 

# Box1. box2. box3 p {(1, 2) color: red ;}. box1 # box2. box3 p {(1, 2) color: green ;}. box1. box2 # box3 p {(, 1) End of the writing sequence, stacked the style aboveColor: blue;}

 

 

② No tag is selected for the selector.: Some styles can be inherited. Who inherited it?

First, compare the selected elements of each selector, the distance from the target element p to the HTML, and the distance from the close cascade. The proximity principle.

 

# Box1 {color: red;}. box1. box2 {color: green;}. box3 {the selected tag is closest to p and inherits itsColor: blue;}

 

 

Second, if the distance is the same, the weight is compared, and the stacked weight of the weight is small.

 

 #box1 .box2 #box3{               (2,1,0) 　　 color: red;  }  .box1 #box2.box2 #box3{   (2,2,0)  　　color: green;  }  .box1 .box2 #box3.box3{     (1,3,0)  　　color: blue;  }

 

 

Again: If the distance is the same, the selector weight is the same, and the reading and writing order is the same.

 

 #box1 .box2 #box3.box3{ 　　 color: red;  }  .box1 #box2.box2 #box3{ 　　 color: green;  }  #box1.box1 #box2 .box3{ 　　 color: blue;  }

 

 

In particular, when comparing weights, an important word can increase the weight of a style attribute to the maximum.

Compared to the proximity principle, important has no impact on inheritance.

 

# Box1. box2 # box3.box3 {color: red ;}# box3 {Color: green!Important;Increase the weight of this attribute to the maximum value, regardless of the selector weight} # box1.box1 # box2. box3 {color: blue ;}

 

To sum up:

 

Finally:

The comparison of moving on is based on the css embedded style. In the css inline style, embedded style, and external chain, the weight is intra-row> inline = external chain, as the name suggests, no matter how embedded or external chain weights are, most of them cannot match the line style!