首页 > 其他分享> > 【H5/CSS】简单介绍样式的继承

【H5/CSS】简单介绍样式的继承

2022-08-06 13:01:23 作者：互联网

样式的继承的意思：

我们为一个元素设置的样式同时也会应用到它的后代元素上，如下的案例可以看到继承是发生在祖先后代之间的，而不会作用到元素外。

案例一：`p`标签中镶嵌`span`标签

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			我是一个p元素
			<span>我是p元素中的span</span>
		</p>

		<span>我是p元素外的span</span>
	</body>
</html>

案例二：`div`中镶嵌`span`，`span`中镶嵌`em`标签

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			div {
				color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div>
			我是div
			<span>
				我是div中的span
				<em>我是span中的em</em>
			</span>
		</div>
	</body>
</html>

优点：

方便开发，可将一些通用的样式统一设置到到共同的祖先元素上

注意点：

并不是所有的样式都会被继承，比如背景相关的，布局相关等的这些样式都不会被继承。
比如案例一改写CSS的样式如下：

p {
    color: red;
    background-color: orange;
}

尽管可以发现后代都有橙色的背景（使用换行测试<br/>），但是认为后代是因为它们本身的背景就是透明的，所以不认为这背景能继承。

参考（P38）

尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
视频讲得不是很多，只是粗略地讲解了两个小案例。

标签：span,样式,继承,元素,H5,color,div,CSS
来源： https://www.cnblogs.com/PaturNax/p/16556878.html