CSS: Weight and cascading rules determine its priority_html/css_WEB-ITnose

Source: http://www.ido321.com/1063.html

First of all, let me read an article about Example of CSS priority: http://www.ido321.com/76.html

1. Basic priority rules

Compare numbers of the same level , the one with the larger number has higher priority. If they are the same, compare the number of the next level . The priority of each level is as follows:

> Class> Tag | Pseudo-class | Attribute selection> Pseudo-object> Wildcard> Inheritance

2. CSS weight rules

In the "Module Design in Page Reconstruction", there are two important factors that affect the weight of the CSS style: A: The order of the first priority and style definition of the style is related to >

     B: The size of the weight is related to the type and number of selectors

     Generally speaking, in the same CSS file, if there are two styles with the same name, the one defined later will overwrite the first one. defined. See (1) for the priority of selector types.

So, how is the weight of CSS calculated?

The weight representation of a selector is: 0.0.0.0. Fill each digit with a number according to the calculation rules. If the corresponding positions are equal, compare the next digit.

The weight calculation rules are as follows: (For convenience, use A.B.C.D to replace the value of each position)

1. Inline style: A=1, B=C=D=0 (i.e. 1.0 .0.0)

2. ID style: How many IDs are included in the selector, and a few 1s are added to the second digit, such as #header{color:red}, which is A=C=D=0,B=1 (i.e. 0.1.0.0)

3. The number of classes, pseudo-classes, and attributes is the value of the third digit:

.a.b[type="text"]:hover{} , there are 2 classes, 1 attribute, and 1 pseudo-class in the selector, so its third position is 4, A=B=D=0, C=4, (i.e. 0.0.4.0)

4. The number of pseudo-elements and label elements is the fourth value

P: FIRST-LTTER. There is a tag element p and pseudo-element first-ltter, the value is 2, a = b = C C =0,D=2 (i.e. 0.0.0.2)

5. Wildcards and inherited CSS properties have no effect on weight

3. Several examples

In view of the above, look at the following examples

1. .a .b .c {color:red;} //0.0.3.0 Description: There are only three categories

2 , *{…} //0.0.0.0 Description: Wildcards have no effect on weight

3. .a .b a {color:green} //0.0.2.1 Description: Two classes and one label

4. #hid {color:black;} //0.1.0.0 Description: There is only one ID

Next article: The "past life" of HTML 5 History API This life”