CSS weights and style precedence issues

1. CSS weight value calculation

The overall weight value of a style rule consists of four separate parts: [A, B, C, D];

(1) A is an inline style (written in the label's Style property), with only 1 or 2 values, and for inline styles, the values for B, C, and D are 0, i.e. A=1, b=0, C=0, D=0 (abbreviated as 1,0,0,0, hereinafter), because there is no selector.

(2) B indicates the number of IDs in the rule, (for example, a selector such as #header, calculated as 0, 1, 0, 0).

(3) C indicates the number of selectors in the rule other than the ID, label, and pseudo-elements, including class selectors, attribute selectors, etc. (e.g.,. logo[id= ' Site-logo ') such selectors, calculated as 0, 0, 2, 0).

(4) D indicates the number of labels and pseudo-elements in the rule, (for example, a selector such as P:first-letter, calculated as 0, 0, 0, 2).

2. CSS style precedence

！ Important > Inline > ID > class > tags | Pseudo Class | Property selection > Pseudo object > Wildcard > Inheritance!!! According to the CSS specification, the more specific the style rules, the higher the weight value.

(1) there! Important tag's attribute weight value ignoring useless! All circumstances specified by important;

(2) Multiple designations! when important, they are offset against each other.

(3) A inherit attribute definition with a priority lower than any directly specified property value.

3. CSS Weight values Comparison

• According to the specification, when calculating the weight value,A, B, C, D four sets of values, from left to right, group comparison, from high to low (from A to D) respectively, the same high level needs to be relatively low, that is, if A is the same, compared to B, if B is the same, compared to C, if the D With, after the definition of precedence.

CSS weights and style precedence issues