CSS inheritance, layering, and specificity

1. Inheritance

(1) A style is applied to a particular HTML tag element and is applied to its descendants.

(2) But certain labels do not apply, such as border;

(3) Example: p{color:red;} Set the color

<p class= "First" >

<p id= "Second" >

The same effect.

2. particularity

(1) When the label matches more than one style, the browser according to the weights to determine which CSS style, the right value to use which.

(2) Example:

p{color:red;}. First{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>
The "timid" display is a green font.
(3) Rules:

3. Cascade

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

(2) Example:

p{color:red;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>
(3) Set the style level consistent, the final text is green, and the back is covered by the previous.
4. Importance
(1) Set the maximum weights for some styles and use important to resolve them.
(2) Syntax: P{color:red!important;}
(3) Example:

P{color:red!important;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>
(4) The original is green covered with red, now is red covered with green, because the red set the highest weight value.

CSS inheritance, layering, and specificity