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

样式的继承的意思：

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

案例一：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>

优点：

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

注意点：

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			p {
				color: red;
				background-color: orange;
			}

			span {
				color: yellowgreen;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<p>
			我是一个p元素
			<br />
			<span>我是p元素中的span</span>
		</p>
	</body>
</html>


尽管可以发现后代都有橙色的背景，但是认为后代是因为它们本身的背景就是透明的，所以不认为这背景能继承。

参考（P38）

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

posted @ 2022-08-06 12:48  帕图纳克斯  阅读(100)  评论(0)    收藏  举报