CSS style Precedence

When you create a style sheet that is becoming more complex, the style of a label will be more and more affected, and the effect may come from the surrounding label or from itself. Let's take a look at the precedence of CSS styles from both sides.

The inheritance of CSS

The inheritance of CSS refers to those CSS attributes applied on a label that are passed to their child tags. Look at the following HTML structure:

<div>    <p></p></div>

If <div> has a property color:red, this property will be inherited by <p>, that is, <p> also has the attribute color:red.

From the above, when the Web page is more complex and the HTML structure is deeply nested, the style of a label will be influenced by its ancestor tag style. The rules that affect are:

CSS Precedence Rule 1: The most recent ancestor style has higher precedence than other ancestor styles.

Example 1:

<!--class named son Div's color is blue--><div style= "color:red" >    <div style= "Color:blue" >        <div Class= "Son" ></div>    </div></div>

If we inherit a label from our ancestors and we don't have a property called "ancestor Style", then "direct style" is a property directly owned by a tag. There are also the following rules:

CSS Precedence Rule 2: "Direct style" is higher than ancestor style precedence.

Example 2:

<!--the color of the div named son is blue--><div style= "color:red" >    <div class= "son" style= "Color:blue" >& Lt;/div></div>

The priority of the selector

First of all, the CSS 7 basic selector:
ID selector, such as #id {}
Class selector, such as. class{}
Property selector, such as a[href= "Www.F44.com"]{}
Pseudo-class selectors, such as: hover{}
Pseudo-element selectors, such as:: before{}
Tag Selector, such as span{}
A wildcard selector, such as *{}

CSS Precedence Rule 3: Precedence relationship: inline style > ID selector > class Selector = Property Selector = Pseudo class selector > tag Selector = pseudo element Selector

Example 3:

Html<div class= "Content-class" id= "Content-id" style= "Color:black" ></div>//CSS#content-id {    color:red;}. Content-class {    color:blue;} div {    Color:grey;}

　　<div> The final color is black, because inline style has higher precedence than other selectors

CSS Precedence Rule 4: Calculates the number of ID selectors in the selector (a), calculates the sum of the number of class selectors, attribute selectors, and pseudo-class selectors in the selector (b), calculates the sum of the number of tag selectors and pseudo-element selectors in the selector (c). According to the order of A, B, C and then the size, the larger the priority is higher, the same is the next. If a, B, and C are equal in the last two selectors, they are judged by the "nearest principle" .

Example 4:

<div id= "Con-id" >    <span class= "Con-span" ></span></div>//css#con-id span {    color: Red;} Div. con-span {    color:blue;}

　　The color of,<span> visible by rule 4 is red.

What happens if the styles in the external style sheet and the inner style sheet conflict? This is related to where the style sheet is located in the HTML file. The more places the style is applied to, the higher the priority, which can still be explained by the rule 4来.

Example 5:

<link rel= "stylesheet" type= "Text/css" href= "style-link.css" ><style type= "Text/css" >    @import URL ( STYLE-IMPORT.CSS);     div {        background:blue;    } </style><div></div>//Style-link.cssdiv {    background:lime;} style-import.cssdiv {    Background:grey;}

　　In order, the inner style is at the bottom and is referenced at the latest, so the background color of <div> is blue.

In the above code, the ' @import ' statement must appear before the internal style, or the file introduction is invalid. You can use this when you must make sure that a particular property is to be displayed.

CSS Precedence Rule 5: Attributes that have the '!important ' attribute inserted have the highest precedence. If '!important ' is inserted at the same time, then rule 3 and 4 are used to determine priority.

Example 6:

<div class= "Father" >    <p class= "Son" ></p></div>//CSSp {    background:red!important;}. Father. Son {    background:blue;}

Although. Father son has a higher weight, the background attribute in selector p is inserted into!important, so the background of <p> is red.

Wrong way of saying

The ID selector weights are 100, the class selector weights are 10, the tag selector weights are 1, and when a selector consists of multiple ID selectors, class selectors, or tag selectors, the ownership values are added and then the weights are compared. There is a problem with this argument. For example, a selector consisting of 11 class selectors and a selector of 1 ID selectors points to the same label, which is supposed to be a > 100, should apply the former style, but the fact is that the latter style is applied. The reason for the error is that the weight of the selector cannot be rounded up. We can try this on our own. The total weight of a selector consisting of 11 class selectors is 110, but since 11 are class selectors, the total weight must not exceed 100, so the latter style is eventually applied.

CSS style Precedence