Deep understanding of CSS weights

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 for B, C, and D are 0, i.e. A=1, b=0, C=0, D=0 (abbreviated as 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 selectors, 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 set 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.

Of special !important

When you define a style, you can apply it to one of the properties, as compared to the ABCD four group !important . For those who have been programming without overloading, it is important to note that the "!" is the opposite of what it means in programming languages, not "unimportant. " It represents " very important ".

CSS2 specification: !important used to specify a single property in a style individually . For the property that is specified, the specified !important weight value is greater than all unused !important rules.

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 forcolorthis attribute, as used in style two!importantmade the designation, socolorThe rule that will apply the style two. andfont-weightaccording to the rules of style one.

!important  ? This time   !important   is offset against each other and is still calculated according to the ABCD four group.

So !important the role is only possible when it is unique, but we can never predict when we need to overwrite an already specified !important property, so the best way is: don't use it !important .

About Inherit

In addition to the style rules that are directly assigned to the element, each property value has a value that may be inherit (inherited). The style attribute that represents the element is inherited from the parent element, consistent with the definition of the parent element. Like what:

<style>. List item {color:red} </style><ul class= "list" > <li class= "Item" > <span > Some text </span> </li></ul>

In the example above, the style rule does not specify a property for the span label color , but span the text in is displayed in red, because span the color default value for the property is inherit .

For inherit the property, just remember one point: inherited property values, weights are always lower than explicitly specified to the definition of the element. The value of a parent element is inherited only if an attribute of an element is not directly specified. For example:

<style>    span {  color: blue }    .list .item { color: red }</ style><ul class= "List" >    <li class= "Item" >         <span> some text </span>    </li></ul> 

Li   element is not for   span   element defined, so the   is calculated; &NBSP of span  , color   Attribute weight value, is actually   inherit   Red vs. directly specified blue. According to the rules, as long as there is a directly specified value (blue), the inherited value (red) is no longer taken, so   the text in span   is displayed in blue.

The most typical scenario for this rule is the color of the linked text. Because the typical browser comes with a style sheet that has a a direct designation for the color of the label and an underscore, the parent element of the a tag in the page style sheet specifies color properties and text-decoration attributes, which generally do not work. But we can change this by using the following reset :

<style> a {color:inherit; Text-decoration:inherit}. Item {color:red}</style><p class= "Item" > <a href= "#" > Link text </a></p>

In the example above, because our style sheets a directly specify color and attribute values for the label text-decoration , overriding the default style of the browser, the a color and underline defined without the specified label are inherited from the parent element p , so the link is displayed in red (with a fill Charging).

Special additions: Not inherit defined in the CSS1 specification, so IE6, IE7, and IE8 Quirksmode are not supported.

Summarize

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

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

3. B indicates the number of IDs in the rule;

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

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

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

7. !importanttagged attribute weight value ignores !important all situations that are not specified;

8. When specified more than once !important , offset each other.

9. inheritThe attribute definition, which has a lower priority than any directly specified property value.

Deep understanding of CSS weights