CSS Inheritance
HTML elements can inherit CSS styles from their parent elements. This is called CSS inheritance. Here is a CSS inheritance example:
<div>
<p>
This text inherits the font-size of the parent div element.
</p>
</div>
<style>
div {
font-family: Aial;
}
</style>
In this example the div element has the font-family property set to Arial. This CSS property is inherited by the nested p element, so it will also have its CSS property font-family set to Arial.
HTML elements can inherit styles from more remote ancestors too, and not just from their parents. Look at this example:
<body>
<div>
<p>
This text inherits the font-size of the parent div element.
</p>
</div>
<style>
body {
font-family: Aial;
}
</style>
</body>
In this example the CSS property font-family is set on the body element. This CSS property is then inherited by the div and p elements.
Not all styles are inherited from a parent or ancestor element. Generally, styles that apply to text are inherited, whereas borders, margins and paddings and similar styles are not.
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步