The inheritance, particularity, layering and importance of CSS

1. Inheritance

Some styles of CSS are inherited, so what is inheritance? Inheritance is a rule that allows a style to be applied not only to a particular HTML tag element, but also to its descendants. For example, the following code: If a color is applied to the P tag, the color setting applies not only to the P tag, but also to all child element text in the P tag, where the child element is the span label.

p{color:red;}   In my third year of <p>, I was a little boy who was <span> timid </span>. </p>

The text in the result p and the text in span are set to red. Note, however, that there are some CSS styles that are not inherited. such as border:1px solid red;

p{border:1px solid Red;}

In the example above, the function of the code is simply to set the P tag with a border of 1 pixels, a red, a solid border line, and for the child element span is useless.

2. 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 boy <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,}/* weights are 1*/   p span{color:green;}/* weights are 1+1=2*/   . Warning{color:white;}/* weights are 10*/   p Span.warning{color:purple,}/* weights are 1+1+10=12*/   #footer. Note P{color:yellow;}/* Weight is 100+10+1=111*/

Note: There is also a special weighted value – inheritance also has the right value but very low, and some documents suggest that it is only 0.1, so it can be understood as the lowest weight of inheritance.

3. Cascade Sex

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;}

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

4. 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 boy <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.

Above this article on the inheritance of CSS, particularity, cascade and importance is small to share all the content of everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.