Deeply parse CSS style cascading weights (GO)

Preface: Toss a half-day fillet, found that Border-radius is a new feature of CSS3, simple and rough to solve the button's fillet display, the middle due to the CSS weight problem, resulting in even if I set the fillet has not been effective. Here is a very good to find a CSS style weights explained, clear, read to understand what is.

Never mind: important > Inline > ID > Class | properties | pseudo-class > tags | pseudo-elements > Wildcard characters > Inheritance (Adjust property selection relative to the original and side-to-side with class for objects)

Just remember that these are enough: important > Inline > ID > Classes | properties | pseudo-class > tags | pseudo-elements

Important > style= "" > #first >. myClass | [type= ' button '] | : hover > Input | :: after

Body ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ deeply parse CSS style stacking weight values

Read the "re-understanding of the weight of CSS" This, ghost brother in the article at the end of the easy to remember the order: "important > Inline > ID > class > tags | pseudo class | attribute selection > Pseudo-object > wildcard > Inherit ". 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 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:

/* 样式一 */body header div nav ul li div p a span em {color: red}/* 样式二 */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 II */ 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 color this attribute, the !important color rule of style two is applied because it is specified in style two. In font-weight accordance with the rules of style one.

What if the same attribute is specified in more than one rule !important ? This time !important the role is offset, still in accordance with the ABCD four group calculation comparison.

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>某些文字</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>某些文字</span>    </li></ul>

In the same example, the weight of the first rule is 0,0,0,1, and the weight of the second rule is 0,0,2,0. Although the second rule has a higher weight, it is a li direct designation for the element, not defined for the span element, so the span computed color attribute weight value is actually inherit the contrast of the red with the directly specified blue. According to the rules, as long as there is a directly specified value (blue), the inherited value (in red) is no longer taken, so span the text in is shown 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.

Source: http://www.ofcss.com/2011/05/26/css-cascade-specificity.html Thanks to the author for sharing

For reference: Http://www.w3cplus.com/css/css-specificity-things-you-should-know.html Thank you for sharing

Deeply parse CSS style cascading weights (GO)