CSS Second: The particularity, importance, inheritance and cascade of Style

Particularity:

If there are several different rules that change the value of the same element, which rule will win? This depends on the special value, what is the special value? What about the size of the special value? Such as:

a larger value means more cattle, such as 1,0,0,0, which is always greater than 0,x,x,x. Here are a few more special examples:

HTML > Body Table tr[id= "ddd"] > li {color:green}/* specificity = 0,0,1,5 [id= "DDD"] the value is 0,0,1,0*/

H1 + P {color:green}/* specificity = 0,0,0,2 */

H1 + P {color:green; font-size:18px}/* specificity = 0,0,0,2 */

* {Color:green}/* specificity = 0,0,0,0 */

<H1 style= "Color:green"}/* specificity = 1,0,0,0 inline style value is 1,0,0,0*/

Importance

Sometimes a statement is important. Then you need to use important statements. Important statements need to be placed behind the declaration of the element, and in other places there is no effect. Such as:

bb.cc {color: "Green"!important}

At the time of presentation, all!important statements are divided into one group, and the particulars of an important statement are resolved internally, and an important statement is always victorious, compared to other statements.

Inherited

About inheritance, such as the following code:

. ddd {font-size:16px;}

<div class= "ddd" ><div class= "DDD1" ></div></div>

class for ddd1 within the DIV font-size size also plenary 16px. inherited values are not specific, even 0 special values are not, so the normal situation as far as possible to avoid the use of the wildcard selector, because the special value 0,0,0,0 will be greater than no special values, if now added a statement, such as:

. ddd1 {font-size:20px;}

The class is ddd1 within the font-size will be 20px, If you now have this code:

<div class= "ddd" ><div class= "ddd1" ><div class= "DDD2" ></div></div></div>

The font-size in the div with Class ddd2 is 20px, and the inheritance takes the nearest principle to match.

Most of the element declarations are inherited, but the box model properties (including margins, padding, background, and borders) cannot be inherited, such as the border property.

Cascade

What would happen if the rules of the particular equivalence were to be used on the same element? such as the following code:

h1 {Color:green;}

h1 {color:red;}

Their special values are 0,0,0,1 and the weights are equal, so which rule does the browser use? At this point we have to look at the stacking rules, such as:

First we look at the 2nd, in the module of importance, we have said that its weight is higher than other statements, but the importance of the flag has three kinds of sources: creators, readers, user agents.

Creator: That is the developer, which means that the developer has added!important to an element.

Reader: The user who browses the Web page with a browser, can add!important to an element by F12 key.

User agent: That is, a browser, such as a browser may default to add!important to an element.

To summarize, the declaration of weight aspects to consider 5 levels, weights from large to small order:

1: Important Statement of the reader

2: An important statement from the creator

3: The creative person's normal statement

4: The normal life of the reader

5: User Agent statement

Next we look at the 4th, as we said above:

h1 {Color:green;}

h1 {color:red;}

In this case, their weights are equal, the two are not!important declared, and eventually the H1 color will be red.

It is also because of the sequential ordering that we have the usual recommended link style sequence expansion, as follows:

: Link{color:blue;}

: Visited{color:purple;}

: hover{color:red;}

: Active{color:orange;}

......

That's what we're talking about today, and the next chapter will start talking about Webpack.

CSS Second: The particularity, importance, inheritance and cascade of Style