What are the inheritance properties of css? Summary of inheritable and non-inheritable properties in css

The so-called inheritance means that the html element can inherit some css attributes from the parent element, even if the current element does not define this attribute. So, which properties of CSS can be inherited and which properties cannot be inherited? Let's take a look at the content of attribute inheritance in CSS.

First let’s take a look at the css priority:

##!important > Inline style> ID selector> Class selector> Tag> ; Wildcards > Inheritance > Browser default properties.

Commonly used css non-inheritable attributes

display: Specifies the type of box that the element should generate

text-decoration: Specifies the box type added to the text Decoration

text-shadow: text shadow effect

white-space: processing of blank characters

Attributes of the box model: width, height, margin, border, padding

Background attributes: background

Positioning attributes: float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max-height, overflow, clip , z-index

Commonly used css inheritable attributes:

font: combined font

font-family: the font family of the specified element

font-weight: Set the thickness of the font

font-size: Set the size of the font

font-style: Define the style of the font

text-indent : Text indent

text-align: Text horizontal alignment

line-height: Line height

color: Text color

visibility: Element visibility

Cursor attribute: cursor

All elements can inherit

1. Element visibility: visibility

2. Cursor attribute ：cursor

Attributes that can be inherited by inline elements

1, font family attributes

2, except text-indent and text-align Text series attributes

Block-level elements can inherit attributes

text-indent, text-align

inherit( Inherit) value

Each attribute can be assigned a value of "inherit", that is: for a given element, the attribute takes the same value as the calculated value of the relative attribute of its parent element. Inherited values ​​are usually used only as fallback values, which can be enhanced by explicitly specifying "inherit", for example:

p { font-size: inherit; }

inherit Limitations

Although inheritance reduces the trouble of repeated definitions, some properties cannot be inherited, such as border, margin, padding, and background.

This setting makes sense. For example, if a border is set for a e388a4556c0f65e1904146cc1a846bee, if this attribute is also inherited, then all elements within this e388a4556c0f65e1904146cc1a846bee will have a border. This It will undoubtedly produce a dazzling result. Likewise, properties that affect element position, such as margin and padding, are not inherited.

At the same time, the browser's default style also affects the inheritance results. For example:

body { font-size: 12px; }

c1a436a314ed609750bd7c7d319db4daThe text of the level 2 title is not 12px. // 2e9b454fa8428549ca2e64dfac4625cd H2 Chinese text will be Title 2 style text instead of 12px size text.

This is because the browser’s default style sets the CSS rule of c1a436a314ed609750bd7c7d319db4da.

At the same time, some older versions of browsers may not support inheritance well. For example, some browsers will lose all inherited attributes when encountering f5d188ed2c074f8b944552db028f98a1.

Once inherited, css properties cannot be canceled and can only be redefined.

Recommended related articles:

CSS inheritance element attributes_html/css_WEB-ITnose

css attributes How to use value inheritance

Introduction to attribute value inheritance in css

The above is the detailed content of What are the inheritance properties of css? Summary of inheritable and non-inheritable properties in css. For more information, please follow other related articles on the PHP Chinese website!