CSS-style code precedence

Source: Internet
Author: User


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.


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).


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.