The inheritance of three characteristics of CSS

CSS has three major characteristics, is the inheritance, cascade, priority, here to explain the inheritance of

Inheritance means that a label that is wrapped inside will have the style of an external label, that is, child elements can inherit the attributes of the parent element, such as the following code, the DIV contains 2 p tags, 1 span tags, when the div set font color red, his child tags will inherit the attributes of the parent element, and therefore will display red. Attributes that begin with text-, font-, and line-in CSS can be inherited.

<! DOCTYPE html>
 
The results appear as follows:


But the inheritance will also have its particularity mainly has the following three kinds:

1> a label font color can not be inherited, such as the above code in the DIV tag code as follows code, a label font color will not change, through the page F12 can be viewed, a label is a default color:-webkit-link; font Color properties, So setting a color for the parent element does not change the color of the A label font

<div>
    <p> Apple </p>
    <p> banana </p>
    <span> grape </span>
    <a href= "#" > This is a tag </a>
</div>
 


2> h Label font can not be inherited, the following code to the parent element in the setting of a font attribute 20px, add a H2 tag in the Div, in the browser will be found in the H2 label font size will not change, because the H2 tag also has a default default font-size: 1.5em; font Size properties,


<! DOCTYPE html>
 



3> div Tag Height if not set by content (no content height is 0), the width is inherited by the parent element, and the following code is a good demonstration of the width of the Div, and a br tag is added after each div tag to force the line break because if you don't use the BR tag to force a newline , Div will be next to each other, can not see the height of the Div, the first Div because there is no content, so the browser does not show up, and the second Div added a word, but the height is made up of the contents of the inside, the third div inside is also a sentence, And in the content of the use of a BR tag to force a newline, which will find that the DIV is higher than the height of the second Div, if you continue to add content to the div tag, the height will correspondingly higher.


<! DOCTYPE html>