Explanation of stacking and weighting in css

If the same tag is selected by multiple selectors, and each selector is set to the same style, who listens to this style when loading in the browser?

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

In order to solve the problem of who to listen to, the concept of cascading is introduced.

CSS style cascading weight value

According to the CSS specification, the more specific the style rule, the higher the weight value. The basis for calculating the weight value is not "class is 10, tag is 1, ID is 100" as described in many articles - although this can get the correct result in most cases.

First let’s look at an easy-to-remember sequence of "important>inline>ID>class>label|pseudo-class|property selection>pseudo-object>inheritance>wildcard"

Calculation of selector weight value

A: If the rule is written in the style attribute of the tag (inline style), then A=1, otherwise, A=0. For inline style, since there is no selector , so the values ​​of B, C, and D are all 0, that is, A=1, B=0, C=0, D=0 (abbreviated as 1,0,0,0, the same below).

B: Count the number of IDs in the selector. If there is, B=1, if not, B=0 (for example, a selector like #header is calculated as 0, 1, 0, 0).

C: Calculate the number of pseudo-classes and other attributes in the selector (including class, attribute selectors, etc., excluding pseudo-elements). (For example, a selector such as .logo[id='site-logo'] is calculated as 0, 0, 2, 0) (Why it is 0,0,2,0 will be further explained later).

D: Count the number of pseudo-elements and tags in the selector. (For example, a selector like p:first-letter evaluates to 0, 0, 0, 2).

Stackability: Multiple selectors select the same tag and set the same style in the browser When loading, not all attribute values ​​will be loaded, only one of them will be loaded, and one value will cascade/cover the other values.

To achieve cascading or covering involves comparison, the following is the comparison selection There are two situations in weight comparison: 1. The selector selects the tag; 2. The selector does not select the tag

## First, let’s talk about the weight of the selector: id>class>label>* (wildcard);

##①The selector selects the label :

First: If both tags are selected, compare the selector weights.

Selectors have weights, and those with greater weights will cascade with those with smaller weights.

Calculate weight: The larger the range selected by the selector, the smaller the weight. id>class>label>*

Method: count the number of selectors, first compare the number of ids → then compare the number of classes → finally compare the number of tags.

##Annotation order in the picture (number of ids, number of classes, number of tags)

Style displayed on the page:

Console display:

Second: If the selector weight Same, compare the writing order of the code in css.

The css code has a loading order, loading from top to bottom, and the later loading will overwrite the previous loading.

 #box1 .box2 .box3 p{      (1,2,1)

  　　color: red;

  }

 .box1 #box2 .box3 p{    (1,2,1)

 　　 color: green;

 }

 .box1 .box2 #box3 p{    (1,2,1) 书写顺序最后，层叠前面的样式  　　color: blue;

 }

② None of the selectors select the tag : Some styles can be inherited. Who inherits it?

First: Compare the distance between the elements selected by each selector and the target element p in HTML, and the ones that are closer are stacked and those that are farther away. Referred to as the proximity principle.

 #box1{    

　　 color: red;

 }

  .box1 .box2{

  　　color: green;

  } 

  .box3{           选中的标签距离p最近，继承他的

  　　color: blue;

  }

Secondly: If the distances are equally close, compare the weights, and the cascade with greater weight will have a smaller weight.

 #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, depending on the writing order.

 #box1 .box2 #box3.box3{

 　　 color: red;

  }

  .box1 #box2.box2 #box3{

 　　 color: green;

  }

  #box1.box1 #box2 .box3{

 　　 color: blue;

  }

Specially, during the weight comparison process, there is a word important that can increase the weight of a certain style attribute to the maximum.

Based on the principle of proximity, important has no effect on inheritance.

 #box1 .box2 #box3.box3{

  　　color: red;

  }

  #box3{

  　　color: green !important;    将这条属性的权重提升的最大，与选择器权重无关

  }

  #box1.box1 #box2 .box3{

  　　color: blue;

  }

## In summary:

Finally:

Move up comparisons are based on CSS inline as an example, in the css inline, inline In the external link type, the weight is: inline > inline = external link. As the name suggests, no matter how heavy the weight of the inline or external link is, it cannot equal the weight of an inline type!

The above is the detailed content of Explanation of stacking and weighting in css. For more information, please follow other related articles on the PHP Chinese website!