CSS Property Inheritance Issues

Concept: The so-called CSS inheritance refers to the internal label will have the outer label of the style nature, it is dependent on the ancestor-descendant relationship. The most typical application of inheritance features is a style preset for the entire Web page, which needs to be specified as part of the other styles in the individual elements.

CSS rules tell the browser how to render a particular element on an HTML page, a CSS rule consisting of two parts, a selector + declaration block, such as: body{color:red;}

Inheritance of the Color property
Case 1://body{color:red;}
<p>> parent P<strong class= "class_s" id= "id_s" > Child strong</strong> Parent p</p>
<ul>
Parent-ul
<li> Sub-li1</li>
<li> Sub-li2</li>
Parent-ul End
</ul>

For an understanding of the HTML document tree, see figure: Document tree. png

Inheritance of the List-style property
Case 2:ul{list-style:none} Li{list-style:none}

The priority (the higher the weight priority) determines that the CSS rule inherits the specified value:
1. The right value of the declaration is higher than the right value inherited.
Case 4:ul{color:pink} Li{color:lightblue}

2, a variety of styles mixed application priority is as follows:
inline style > ID selector > class selector and pseudo class selector > element selector and pseudo class element selector > Wildcard selector > Outer style
Case 5:strong{color:black}
. Class_s{color:wheat}
#id_s {Color:blue}

3, the order in the document appears, the more in the back, the higher the priority
Case 5:strong{color:black} Strong{color:lawngreen}

4, human-defined CSS inheritance priority (important rules) by inserting a semicolon in front of a rule! Important such a phrase to mark an important rule
It has the highest priority level
Case 6:strong{color:black!important}

Not all attributes are inherited, such as Boder,width,display, such as properties that cannot be inherited
Case 7:p{border:1px solid;width:200px}
<p> Parent p<strong> Child strong</strong> Parent p</p>
<script>
var p=document.getelementsbytagname ("P") [0];
var num=0;
function Bul () {
if (num==0) {
P.style.display= "None";
Num=1;
}
else{
p.style.display= "Block";
num=0;
}

}
</script>

Here is a summary of some of the properties of the style sheet that are inherited:
1. fonts (font)
Inheritance--There are: font, color, font-family, Font-size, Font-size-adjust, Font-stretch, Font-style, Font-style, Text-underline-position, Font-variant, Text-transform line-height, letter-spacing, word-spacing

Inheritance--None: Text-decoration, Text-shadow

2. Texts (text)
Inheritance--There are: Text-indent, Text-align, Layout-flow, Writing-mode, White-space, Word-wrap, Text-kashida-space, Layout-grid, Layout-grid-char, Layout-grid-char-spacing, Layout-grid-line, Layout-grid-mode, Layout-grid-type

Inheritance-None: Text-overflow, Vertical-align, direction, Unicode-bidi, Word-break, Line-break, Text-autospace, Text-justify, Ruby-align, Ruby-overhang, Ruby-position, Ime-mode,

3. Background (Background)
None of the inheritance is:
Background, Background-origin, Background-clip, Background-size, Background-attachment, Background-color, Background-image, Background-position, Background-positionx, Background-positiony, Background-repeat, Layer-background-color, Layer-background-image

4. Positioning (Position)
None of the inheritance is:
Position, Z-index, top, right, bottom, left

5. Size (Dimensions)
None of the inheritance is:
Height, max-height, min-height, Width, max-width, min-width

6. Layout
None of the inheritance is:
Clear, float, clip, overflow, overflow-x, overflow-y, display, visibility

7, External patch (Margins)
None of the inheritance is:
Margin, margin-top, Margin-right, Margin-bottom, Margin-left

8. Contour (Outlines)
None of the inheritance is:
Outline, Outline-color, Outline-style, Outline-style, Outline-width

9. FRAME (Border)
None of the inheritance is:
Border, Border-color, Border-style, Border-image, Border-radius, Box-shadow, Border-width, Border-top, Border-top-color, Border-top-style, Border-top-width, Border-right, Border-right-color, Border-right-style, Border-right-width, Border-bottom, Border-bottom-color, Border-bottom-style, Border-bottom-width, Border-left, Border-left-style, Border-left-width

10. Internal Patch (Padding)
None of the inheritance is:
Padding, padding-top, Padding-right, Padding-bottom, Padding-left

11. List (Lists)
Inheritance--: List-style, List-style-image, List-style-position, List-style-type

Inheritance--None: Marker-offset

12. Form (tabble)
Inheritance is:
Border-collapse, Border-spacing, Caption-side, Empty-cells, Table-layout, Speak-header

13. Other
None of the inheritance is:
Cursor, zoom

CSS Property Inheritance Issues