Deep understanding of selector weights

"Important > Inline > ID > class > tags | Pseudo Class | Property selection > Pseudo-object > Inheritance > Wildcard character "

So how does this order come out? In fact, in the definition of CSS2 specification for specificity (specificity), the description is very clear, but many Chinese version of the CSS books using 10 binary Simple addition calculation method (including the first version of the CSS authoritative guide, the second version has been corrected). Therefore, the specification of the CSS cascade priority of the relevant definitions to paraphrase, I hope to get started or to calculate the weight of the friends have doubts to provide some reference.

According to the CSS specification, the more specific the style rules, the higher the weight value. The basis for calculating the weight value is not as many articles describe as "class is 10, the label is 1,id is 100" and so on-although in most cases you get the right result.

Calculation of the selector weight value

A: If the rule is written in the label's style attribute (inline style), then a=1, otherwise, a=0. For inline styles, because there is no selector, the values of B, C, D are 0, i.e. A=1, b=0, C=0, D=0 (abbreviated to 1,0,0,0, hereinafter);

B: Calculate the number of IDs in this selector. (for example, #header such a selector, calculated as 0, 1, 0, 0);

C: Calculates the number of pseudo-classes and other attributes in the selector (including class, attribute selectors, etc., excluding pseudo-elements). (for example,. logo[id= ' Site-logo ') such a selector, calculated as 0, 0, 2, 0);

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

Some examples given in the CSS2 specification:

* {}/* a=0 b=0 c=0 d=0-specificity = 0,0,0,0 */

Li {}/* a=0 b=0 c=0 d=1 specificity = 0,0,0,1 */

Li:first-line {}/* a=0 b=0 c=0 d=2-specificity = 0,0,0,2 */

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 = 0,0,0,3 */

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,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,1,0,0 */

Style= ""/* a=1 b=0 c=0 d=0-specificity = 1,0,0,0 */

According to this definition, many articles simply summarize the rule as: the weight value of the inline style is that the weight value of the 1000,id selector is the weight value of the 100,class selector is 10, and the weight value of the tag Selector is 1. All selector weight values in the entire rule are added to the weight value of the entire style rule, and the larger the number the higher the weight value.

In most cases, it is not a problem to follow this understanding, but there is a problem with the following situation:

Style One: Body header Div nav ul Li Div p a span em {color:red}

Style two:. Count {Color:blue}

According to the wrong calculation method, the weight value of style one is 11, the weight value of style two is 10, if these two rules are used for the same element, then the element should be red. The actual result is blue.

Comparison of weight values

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

According to the specification, when calculating the weight value, a,b,c,d four sets of values, from left to right, group comparison, if A is the same, compare B, if B is the same, compare C, if C is the same, compare D, if D is the same, then define the precedence.

Style two and style one of a, B is the same, and style two C is greater than style one, so, regardless of the value of D, style two weight values are greater than style one. That's the right answer.

Special!important.

In addition to calculating comparisons based on the ABCD four group, you can also apply!important to an attribute when defining a style. For those who have been working on programming without overloading, special attention is paid to the "!" Rather than in the programming language, it is the opposite, not "unimportant" but "very important".

The CSS2 specification stipulates that!important is used to specify individual properties in a style individually. For properties that are specified,!important specifies a weight value that is greater than the rule specified by all unused!important.

For example:

Style one: #header nav ul li.current {color:red; font-weight:bold;}

Style two: li:hover {color:blue!important; font-weight:normal;}

For the whole rule, the weight value of style one is 0, 1, 1, 3, and the weight of style two is only 0, 0, 0, 2. So when applied to the same element, the style should take effect. But for the color attribute, the

In style two is specified with!important, so color will apply the rule of style two. Font-weight, in accordance with the rules of style one.

What if!important is specified for the same attribute in more than one rule? At this time!important's role is offset, still calculated in accordance with the ABCD four group comparison.

So!important's role can only be presented when it is unique, but we can never predict when we need to overwrite a property that has already specified!important, so the best thing to do is: don't use!important.

Summarize

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

A represents an inline style, with only 1 or 2 values;

b indicates the number of IDs in the rule;

C indicates the number of selectors in the rule other than the ID, label, and pseudo-elements;

D indicates the number of labels and pseudo-elements in the rule;

Compared from high to low (from A to D) respectively, the same high level to be relatively low;

The attribute weight value with!important tag ignores all circumstances that are not!important specified;

When!important are specified multiple times, they are offset against each other.

Deep understanding of selector weights