Overlay rules for CSS styles

Here's a full understanding of CSS style overlay rules. Content is very good, now share to everyone, but also for everyone to make a reference.

We all know that the full name of CSS is called "Cascading style sheets", but it is estimated that many people do not know the meaning of the word "cascade". In fact, "cascade" refers to the overlay of the style, when an element is applied to a variety of styles, and the name of the same style attributes, the browser must choose a property value from, this process is called "cascade." Style coverage (this is more popular) follow certain rules, I have been indefinitely to this rule until the last few days to see "Css:the Missing Manual", only enlightened. Here are some of my study notes.

First of all, it is necessary to be clear that a number of situations will result in the application of a variety of styles, the rules of the style overlay need to be based on different circumstances, the specific rules are as follows.

Rule one: When a style conflict occurs due to inheritance, the nearest ancestor wins.

The inheritance mechanism of CSS allows elements to inherit styles from the ancestor elements that contain it, considering the following scenario:

Strong inherits the color attribute from body and p respectively, but because P is closer to strong on the inheritance tree, the text in strong eventually inherits the blue of P.

Rule two: The style that is inherited and the style that is directly specified in conflict with the styles that are directly specified prevail.

In the example above, if you also specify the style of the strong element, such as:

strong {color:red;}
Then, according to rule two, the text in strong is eventually shown in red.

Rule three: When a style that is directly specified conflicts, the height of the style weights wins.

The weights of the styles depend on the selector of the style, and the weights are defined in the following table.

CSS selector weights

Tag Selector 1
Class Selector 10
ID Selector 100
Inline Style 1000
Pseudo-Elements (: First-child, etc.) 1
Pseudo-Class (: Link etc) 10

As you can see, the weights of inline styles >>id selector >> class selector >> Tag Selector, in addition, the weight of the descendant selector is the sum of each weight value, such as "#nav. Current A" has a weighted value of 100 + 10 + 1 = 111.

Rule four: The style weights are the same, the latter wins.

Consider the following scenario

<pclass= "byline" >written by    <aclass= "email" href= "Mailto:jean@cosmofarmer"    . com ">jean    graine de pomme</a></p>12. byline    a {color:red;} P    . Email {color:blue;}
". Byline a" and "p. Email" both directly specify a element above, and the weight value is 11, according to rule four, the final display of blue.

Because style sheets can be external or internal, rule four reminds us of the order in which the external style sheets are introduced (and the order of the <link> elements), and where the external style sheet and the internal style sheet appear. In general, an internal style sheet appears after the introduction of all external style sheets, typically before 
Rule five:!important style attributes are not overwritten.

!important can be seen as a last resort, breaking the four rules of the "golden finger". If you must take a style attribute and not let it be overwritten, you can add!important to the attribute value, taking the example of rule four, ". Byline a {color:red!important;}" You can force the link to appear red. In most cases, you can control the overlay of styles in other ways, and you cannot abuse!important.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!