CSS cascading rules (cascading style sheets)

CSS cascading rules are:

1 . Find all the relevant rules that contain selectors that match a given element.

2 . Sort all declarations applied to a given element by weight (!important) and source .

3, according to the particularity of the application to the given element of all the declarations to order, there is a higher specificity of the element weight is greater than the element with lower specificity,0 particularity than no special to strong (inheritance).

4 . Sort all declarations applied to a given element in the order in which they appear, followed by a claim weight greater than the previous declaration, which overrides the previously defined style. (For the same time as the special)

Interpretation:

I. weights and Sources

Source:

1. Creative Staff (developer )

1), external style, that is, <link> reference CSS suffix file;

2), internal style, that is, written in the <style></style> tag style;

3), inline style, that is, directly written in the style attribute (Web page design emphasizes structure, performance, behavior of the three separate, not recommended. );

2, the reader (user-defined style: Some pages will provide users to customize the font size color, such as shortcut keys;)

3, the user agent (most important is: Browser default style)

Weights (sorted in order from large to small):

1) Reader's important statement (!important)

2) The creator's important statement (!important)(above the inline style!) )

3) The normal statement of the creator.

4) Reader's normal statement

5) Statement of the user agent

Second, style inheritance

Document application Declarations There is also an important concept of inheritance: it relies on ancestor-descendant relationships, and inheritance is a mechanism that allows a style to be applied not only to a particular element, but also to its descendants.

The inheritance in CSS is also selective, not all CSS is inherited, most of the box model properties can not inherit, for example, inside, margin, background and border and so on.

For example, a body-defined color value is also applied to the text of a paragraph.

Three, the particularity of selectors

1, for the inline style, the special first plus 1, that is, 1,0,0,0.

2, for the id attribute value appearing in the selector , plus 0,1,0,0, how many ID values in the second place plus several.

3, for the class attribute values appearing in the selector, attribute selection and Pseudo-class, add 0,0,1,0, thetotal number of occurrences in the third place plus several.

4, for the elements appearing in the selector, as well as pseudo-elements, plus 0,0,0,1, the total number of occurrences in the fourth place plus several.

5, the wildcard character has no contribution to the particularity, that is, the particularity is 0,0,0,0.

6 . There is no particularity of the binding character, even 0 particularity.

7, inherited css completely no particularity, even 0 special also did not.

Note: because the particularity of the wildcard * is 0, and the inherited CSS is not special, even 0 is not, so the wildcard weight to be greater than the inheritance.

Example of a particular calculation:

H1{Color:Red;}/*specificity = 0,0,0,1*/p em{Color:Purple;}/*specificity = 0,0,0,2*/. Grape{Color:Yellow;}/*specificity = 0,0,1,0*/*.grape{Color:Yellow;}/*specificity = 0,0,1,0*/P.grape Em.dark{Color:Maroon;}/*specificity = 0,0,2,2*/#grape{Color:Blue;}/*specificity = 0,1,0,0*/Div#grape *[href]{Color:Silver;}/*specificity = 0,1,1,1*/HTML > Body > Table tr[id= "totals"] TD ul > Li{Color:Maroon;}/*specificity = 0,0,1,7*/H1 + P{Color:Black;}/*specificity = 0,0,0,2*/

CSS cascading rules (cascading style sheets)