CSS style cascade Weight Values

CSS style cascade Weight Values

According to the CSS specification, the more specific the style rules, the higher the weight. The basis for weight calculation is not manyArticleAs described, "class is 10, label is 1, ID is 100" and so on -- although this can get the correct result in most cases.

First, let's look at a sequence that is easy to remember"Important> inline> ID> class> label | pseudo class | attribute selection> pseudo Object> inheritance> wildcard"

Calculation of selector Weight Values

A: If the rule is written in the style attribute of the label (Inline style), a = 1. Otherwise, a = 0.For inline styles, because there is no selector, the values of B, C, and D are 0, that is, a = 1, B = 0, c = 0, D = 0 (abbreviated as 1, 0, 0, 0, the same below ).

B: calculates the number of IDs in the selector.If yes, B = 1 and no B = 0 (for example, a selector such as # header is calculated as 0, 1, 0, 0 ).

C: calculates the number of pseudo classes and other attributes in the selector.(Including class and attribute selector, excluding pseudo elements ). (For example ,. the selector, such as logo [ID = 'site-logo '], is calculated as 0, 0, 2, 0. (The following explains why it is 0, 0, 2, 0 ).

D: calculate the number of pseudo elements and tags in the selector.(For example, a selector such as P: First-letter is calculated as 0, 0, 0, and 2 ).

Examples provided in the css2 specification:

• * {}/* A = 0 B = 0 C = 0 D = 0-> specificity = 0, 0, 0 */
• Li {}/* A = 0 B = 0 C = 0 d = 1-> specificity = 0, 0, 1 */
• Li: first-line {}/* A = 0 B = 0 C = 0 d = 2-> specificity = */
• Ul Li {}/* A = 0 B = 0 C = 0 d = 2-> specificity = 0, 0, 0, 2 */
• Ul ol + Li {}/* A = 0 B = 0 C = 0 d = 3-> specificity = */
• H1 + * [rel = up] {}/* A = 0 B = 0 C = 1 d = 1-> specificity = 0, 0, 1, 1 */
• Ul ol Li. Red {}/* A = 0 B = 0 C = 1 d = 3-> specificity = 0, 1, 3 */
• Li. Red. level {}/* A = 0 B = 0 C = 2 D = 1-> specificity = 0, 0, 2, 1 */
• # X34y {}/* A = 0 B = 1 c = 0 D = 0-> specificity = 0, 0, 0 */
• Style = ""/* A = 1 B = 0 C = 0 D = 0-> specificity = 1, 0, 0, 0 */

This statement is incorrect:

According to this definition, many articles simply sum up the rule as follows: the weight of the inline style is 1000, the weight of the ID selector is 100, and the weight of the class selector is 10, the weight of the tag selector is 1. all selector weights in the entire rule are added together to obtain the weights of the entire style rule. The larger the number, the higher the weight.

In most cases, there is no problem with the conclusions drawn Based on this understanding, but the following problems occur:

Style 1:Body header Div nav ul Li Div p a span em {color: Red}

Style 2:. Count {color: Blue}

According to the incorrect calculation method, the weight of style 1 is 11 and that of style 2 is 10. If the two rules are used for the same element, the element should be red. The actual result is blue.

Comparison of Weight Values

According to the correct calculation method of the four groups, the weight value of style 1 in the above example should be 0, 0, 0, 11, and the weight value of style 2 is 0, 0, 1, 0.

According to the specification, when weight values are calculated, A, B, C, and D are grouped and compared from left to right. If a is the same, B is compared. If B is the same, C is compared, if C is the same, compare D. If D is the same, the latter-defined priority is given.

Style 2 is the same as a and B of style 1, and style 2's C is greater than style 1. Therefore, regardless of the value of D, the weight of style 2 is greater than style 1. This is the correct answer.

Special! Important

In addition to the calculation and comparison based on the four groups of ABCD, you can apply a certain attribute when defining a style! Important. For those who have been engaged in programming but have not done refactoring, special attention should be paid to "!" here. InsteadProgramming LanguageThe meaning is the opposite. It does not mean "not important", but "very important ".

Css2 specifications :! Important is used to specify a single attribute in a style. For the specified attribute, yes! The weight specified by important is greater than that of all unused ones! The rules specified by important.

For example:

Style 1:# Header nav ul Li. Current {color: red; font-weight: bold ;}

Style 2:Li: hover {color: Blue! Important; font-weight: normal ;}

For the entire rule, the weight of style 1 is 0, 1, 1, 3, and the weight of style 2 is only 0, 0, 2, 0. When applied to the same element, style 1 should take effect. However, the attribute color is used in style 2! Important is specified, so color applies the rule of style 2. Font-weight uses style 1 rules as required.

If the same attribute is specified in multiple rules! What about important? This time! The effects of important are offset by each other and are still compared according to the four groups of ABCD.

so! Important can only be extracted when its function is unique, but we can never predict when we need to overwrite a specified one! Important attributes, so the best way is: Do not use! Important.