What is the use of inherit keyword in CSS

The inherit keyword in CSS allows the CSS styles of descendant elements to inherit their values ​​​​from parent elements or ancestor elements, and it can be applied to any CSS property

【Recommended course: CSS Tutorial】

inherit keyword

Due to the cascading nature of CSS, some CSS properties automatically inherit their values ​​from the element's parent. For example, if you set the text color of an element, all descendants of that element will inherit the same text color. Even if some attribute values ​​are automatically inherited, there may be situations where the weight of inherited attributes is increased. In this case, using inherit on a property that already inherits the parent value by default will force the parent value to be inherited.

One situation where automatically inherited values ​​are enforced via the inherit keyword is when the user agent's style sheet overrides the inherited values ​​(the default styles that browsers apply to certain elements)

For example, the color value of text is automatically passed to all descendants of the element, but in the case of a link, the color attribute is usually set to blue in the user agent style sheet. In most cases, you can apply a different color to the links, or inherit the same color as the rest of the text and possibly apply another visual effect to indicate that they are links (such as applying an underline or a background color, etc.). Assuming you want the link to have the same text color as the rest of the text, you can use the inherit value to force the color value that would normally be inherited.

div{
			color:pink;
		}
		a{
			color:inherit;
		}

Rendering:

Some CSS properties will not inherit the calculated value of the element's parent, but we want to 's property value is set to the same value as its parent's. In this case the inherit keyword comes in handy, allowing properties that do not automatically inherit a value to inherit it.

For example, if you set a blue border for an element and want all its child element divs to have the same border, you can set the inherit keyword to let them inherit the same border color as the parent element.

.el {
  padding:10px;
  border: 5px solid #0099cc;
}

.child {
	padding:10px;
  margin-top: 20px;
  border: inherit;
}

.el-2 {
  margin-top: 30px;
  border: 5px solid hotpink;
}

.child-2 {
  border: 5px solid inherit;
  margin-top: 20px;
}

Rendering:

Note: The inherit keyword does not support abbreviated attributes, it must be A unique value in the declaration, such as border: 1px solid inherit will not inherit the border color from the parent element because it does not recognize the child property that the value inheritance refers to. But it can be inherited through border:inherit

Summary: The above is the entire content of this article. I hope that through this article, everyone can understand the key to inherit in CSS. I know the words.

The above is the detailed content of What is the use of inherit keyword in CSS. For more information, please follow other related articles on the PHP Chinese website!