CSS-style code precedence

Particularity

Sometimes we set a different CSS style code for the same element, so which CSS style does the element enable? Let's take a look at the following code:

p{color:red;}. First{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

P and. First are matched to P on this tab, so what color does it show? Green is the right color, then why? This is because the browser uses the weights to determine which CSS style to use, and which CSS style to use when the weights are high.

Here are the rules for weights:

The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100. For example, the following code:

P{color:red,}/* Weighted value is 1*/p span{color:green;}/* the weight is 1+1=2*/.warning{color:white;}/* The weight is 10*/p span.warning{color:purple;} /* The weighted value is 1+1+10=12*/#footer. Note P{color:yellow;}/* Weighted value is 100+10+1=111*/

Note: There is also a special weighted value-inheritance also has the right value but very low, some literature proposed it only 0.1, so it can be understood as the lowest weight of inheritance.

Cascade

Let's consider a question: what if there are multiple CSS styles in the HTML file that can exist for the same element and that have the same weight values for the multiple CSS styles? Well, the Cascade in this section helps you solve this problem.

Cascading is in the HTML file for the same element can have more than one CSS style exists, when the same weight of the style exists, according to the order of the CSS style to decide, in the back of the CSS style will be applied.

As in the following code:

p{color:red;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

The text in the last P is set to green, which is well understood and is understood as a style that overrides the previous style.

So the previous CSS style precedence is easy to understand:

Inline style sheet (inside label) > Embedded style sheet (in current file) > external style sheet (in external file).

Importance

When we do the code of the Web page, some special situations need to have the highest weights for some style settings. At this time we can use!important to solve.

The following code:

P{color:red!important;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

The text in the p paragraph is then displayed in red.

Note:!important to be written in front of the semicolon

Note that when a page creator does not set a CSS style, the browser displays the page in its own set of styles. And users can also set their own custom style in the browser, such as some users are accustomed to the font size to larger, so that they see the text of the page more clearly. Notice that the style priority is: Browser default style < page maker Style < user-set style, but remember that the!important priority style is an exception and the weight is higher than the user's own style.

CSS-style code precedence