CSS style sheet inheritance

What is inheritance?
To understand the inheritance of CSS style sheets, we should first start with the document tree (html dom. The document tree consists of HTML elements.

 

Similar to the family tree, the document tree also contains the ancestor, descendant, father, child, and brother ^_^. This is easy to understand. I will not go into details here. For more information, see Google.

Then CSSStyle Sheet Inheritance refers to the specific CSSThe attribute is passed down to the child element.

For example, the following htmlCodeFragment:

<P>
DEMO code of CSS style sheet <em> inheritance feature </em>
</P>

Note that EM is included in P.

When we specify the CSS style of P, what changes will EM make?

<Style>
P {color: red ;}
</Style>

In the browser, the P and EM fonts become red at the same time. We didn't specify the EM style, but em inherits the style feature of its parent element p.

You may think this is a matter of course after reading it. It is not worth it. In fact, this is inheritance. This affects our code without knowing it (Imagine if there is noInheritance featuresYou need to define the color attribute for each element. how painful this is !!! = _ = !).

Of course, not all CSS attributes will be inherited by the quilt class.For example, the border attribute. Continue to use the above Code. We add the border attribute for the P element.

P {border: 1px solid red ;}

Fortunately, the border attribute of P is not inherited by EM; otherwise, is it strange ?! Pai_^

Which attributes can be inherited?? CSS style sheet attributes can be inherited as follows:

Azimuth, border-collapse, border-spacing,
Caption-side, color, cursor, direction, elevation,
Empty-cells, font-family, font-size, font-style,
Font-variant, font-weight, Font, letter-spacing,
Line-height, list-style-image, list-style-position,
List-style-type, list-style, orphans, pitch-range,
Pitch, quotes, richness, speak-header, speaknumeral,
Speak-punctuation, speak, speechrate,
Stress, text-align, text-indent, texttransform,
Visibility, voice-family, volume, whitespace,
Widows, word-spacing

Scared ?! So many ?! How can I remember? Don't worry. Let's take a look at these attributes.

Text attributes:

Azimuth, border-collapse, border-spacing,
Caption-side, color, cursor, direction, elevation,
Empty-Cells,Font-family, font-size, font-style,
Font-variant, font-weight, Font, letter-spacing,
Line-height, List-style-image, list-style-position,
List-style-type, list-style, orphans, pitch-range,
Pitch, quotes, richness, speak-header, speaknumeral,
Speak-punctuation, speak, speechrate,
Stress,Text-align, text-indent, texttransform,
Visibility, voice-family, volume, whitespace,
Widows,Word-spacing

List attributes:

Azimuth, border-collapse, border-spacing,
Caption-side, color, cursor, direction, elevation,
Empty-cells, font-family, font-size, font-style,
Font-variant, font-weight, Font, letter-spacing,
Line-height,List-style-image, list-style-position,
List-style-type, list-style, Orphans, pitch-range,
Pitch, quotes, richness, speak-header, speaknumeral,
Speak-punctuation, speak, speechrate,
Stress, text-align, text-indent, texttransform,
Visibility, voice-family, volume, whitespace,
Widows, word-spacing

Another attribute is important,ColorAttribute.

It is worth noting thatFont-size. Obviously, font-size can be inherited. However, there are some special methods. The font-size subclass does not inheritActual value,Calculated value. Why is font-size so special?

Let's look at an example:

<P>
DEMO code of font size attribute <em> inheritance feature </em>
</P>

Define the font size for P as 80% of the default font.

P {font-size: 80%}

What if font-size inherits relative values? According to this logic, Em's font-size is 80% X80 % = 64%, And the webpage looks like this.

However, this is not the case. The text in EM does not change the size, but is consistent with P.

The following three examples give you an intuitive understanding.

P {font-size: 14px ;}

Because the default font size of the browser is 16 PX, and P defines the font 14px, EM inherits the font size attribute of P, which is also 14px;

elements	value	calculated value
default font size	about 16 pixels
	unspecified	about 16px
	14px	14px
	unspecified	inherited value = 14px

P {font-size: 85% ;}

The default font size of browser games is 16px, while P defines the font size (16px x 85% = 13.6px). The value 13.6px inherits the quilt element em.

elements	value	calculated value
default font size	about 16 pixels
	unspecified	about 16px
	85%	16px x 85% = 13.6px
	unspecified	inherited value = 13.6px

P {font-size: 0.85em ;}

The default font size of browser games is 16px, while P defines the font size (16px x 0.85em = 13.6px). 13.6px, which inherits the quilt element em.

Element	Value	Calculated value
Default font size	About 16 pixels
<Body>	Not Specified	About 16px
<P>	0.85em	16px x 0.85em =13.6px
<Em>	Not Specified	Inherited value =13.6px

 

The above examples are all relatively simple answers, and then a complicated

Body {font-size: 85% ;}
H1 {font-size: 200% ;}
H2 {font-size: 150% ;}

The default font size of browser games is 16px, while the body defines the font size (16px x 85% = 13.6px). If the child element does not specify the font size 13.6px, the quilt element is inherited.

Element	Value	Calculated value
Default font size	About 16 pixels
<Body>	85%	16px x 85% =13.6px
<H1>	200%	Inherited value = 13.6px x 200% =27.2px
<H2>	150%	Inherited value = 13.6px X 150% =Limit 4px
<P>	Not Specified	Inherited value =13.6px
<Em>	Not Specified	Inherited value =13.6px

 

Speaking of this, the inheritance of CSS style sheets is basically finished. In practice, there is anotherFeature valueIt should be explained that this is also closely related to the inherited application.

In the style sheetFeature valueDescribes the relative weights of different rules. The basic rules are as follows:

◆ Count the number of ID attributes in the selector.

◆ Count the number of class attributes in the selector.

◆ The HTML Tag Name format in the statistics selector.

Finally, write three numbers in the correct order. Do not add spaces or commas to get a three-digit number. (Note: You need to convert a number into a larger number ending with three digits ). The final number list corresponding to the selector can easily determine that a higher number is superior to a lower number.

The following is a list of feature-specific delimiters:

H1 {color: Blue;} feature value: 1
PEM {color: Purple;} feature value: 2
. Apple {red;} feature value: 10
P. Bright {color: yellow;} feature value: 11
P. brightem. Dark {color: Brown;} feature value: 22
# Id316 {color: yellow} feature value: 100

From the above table, we can see that # id316 has a higher particularity, so it has a higher weight. When multiple rules can be applied to the same element, the style with a higher weight will be preferentially used. The property value of the inherited attribute is 0. That is to say,AnyCSSProperty values with conflicting inherited values overwrite the inherited property values.!!!