3 CSS样式的继承

CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。

image

在上图中，可以看到，body的子元素有三个，h1、p和ul，ul也有几个子元素，p也有1个子元素，那么li和a就都是body的后代元素。有时可能我们在body里面设置了一些属性，结果，body下面所有的后代元素都可能享受到，这就是样式继承。就像一句俗语一样，“龙生龙，凤生凤，老鼠的儿子会打洞”。样式继承，可以给我们的网页布局带来很多的便利，让我们的代码变得更加简洁，但是，如果不了解，或者使用不当，也有可能会给我们带来很多不必要的麻烦。

继承是一种规则，当设置一个标签属性，那么该标签下的子子孙孙都继承父类的的标签属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>继承性</title>
	<link rel="stylesheet" type="text/css" href="CSS/CSSlink.css">
</head>
<body>
	<div>A</div> <!-- div 继承了body的属性 -->
</body>
</html>

body{
	color: red;
	font-size: 30px;
	border: 1px solid red;
}

可在浏览器源码中查看那些元素是可以被继承和不可被继承（高亮继承反之不继承）

image

posted @ 2022-08-04 16:08  角角边  Views(158)  Comments(0)    收藏  举报