CSS inheritance, stacking and particularity

1, some styles of inheriting 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.

Note, however, that there are some CSS styles that are not inherited. such as border:1px solid red;

2, special sometimes when we set different CSS style code for the same element, which CSS style is enabled by the element? The browser is based on the weights to determine which CSS style to use, which of the high weight of the use of that CSS style.

Weight rule: The weight value of the label is 1, and the weight of the class selector is the weight of the 10,id selector is 100.

For example:

/ * Weighted value is 1*/ / * Weighted value is 1+1=2*/ / * Weighted value is 10*/ / * Weighted value is 1+1+10=12*/ / * 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.

3, 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.

4, importance when we are doing the code of the Web page, some special cases need to have the highest weight for some style setting, we can use !important to solve it.

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

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 set style.

CSS inheritance, stacking and particularity