CSS的两大特性之继承性和层叠性

最新推荐文章于 2024-05-15 18:00:00 发布

陈小栋

最新推荐文章于 2024-05-15 18:00:00 发布

阅读量573

点赞数 1

分类专栏： css 文章标签：继承 css

本文链接：https://blog.csdn.net/github_38535279/article/details/73025623

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.继承性

css的继承性指的是子元素会继承父元素的某些样式属性。例如在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色，不过，并不是所有的属性都会被子元素继承，如margin，padding，border等就不具备继承性。在css中，具有继承性的属性有三大类:

文本相关的属性:font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing.
列表相关的属性:list-style-type、list-style-image、list-style-position、list-style
颜色相关的属性:color

举例：

<!doctype html>
<html lang="CN">
	<head>
		<title></title>
		<meta charset="utf-8">
		
		<style type="text/css">
			body{
				font-size:14px;
				font-family:"Microsoft Yahei";
			}
			#father{
				color:red;
				font-weight:bold;
			}

		</style>
	</head>
	<body>
		<div id="father">
			这是父元素
			<div id="son">
				这是子元素
			</div>
		</div>
	</body>
</html>

预览效果如下图这里为父元素定义了color和font-weight两个属性，从预览效果我们可以看到，子元素继承了父元素的这两个属性值。

特殊举例：

<!doctype html>
<html lang="CN">
	<head>
		<title></title>
		<meta charset="utf-8">
		
		<style type="text/css">
			body{
				font-size:14px;
				font-family:"Microsoft Yahei";
			}
			#father{
				color:red;
				font-weight:bold;
			}

		</style>
	</head>
	<body>
		<div id="father">
			这是父元素
			<div id="son">
				<a href="#">这是子元素</a>
			</div>
		</div>
	</body>
</html>

预览效果：

我们发现当给子元素添加a标签时，子元素并没有继承父元素的字体颜色，这是因为a标签本身有默认的颜色样式，优先级比继承的要高，如果想要改变a标签的颜色，只能选中a标签，然后再进行单独操作。

2.层叠性

首先我们来看一个问题，如果在网页中，我们对于同一个元素重复定义了多个相同的属性时，CSS会怎么处理呢？

看下面的代码：

<!doctype html>
<html lang="CN">
	<head>
		<title></title>
		<meta charset="utf-8">
		
		<style type="text/css">
			body{
				font-size:14px;
				font-family:"Microsoft Yahei";
			}
			div{color:green;}
			div{color:blue;}
			div{color:red;}

		</style>
	</head>
	<body>
	<div>hello world</div>
	<div>hello world</div>
	<div>hello world</div>
	</body>
</html>

预览效果如图：

我们发现字体显示的红色，由此可知，由于CSS的层叠性“color:blue”会覆盖“color:green”,而“color:red”会覆盖"color:blue",因此，最终所有div的颜色为red。

CSS的层叠性，指的就是样式的覆盖，对于同一个元素来说，如果我们重复定义多个相同的属性，并且这些属性具有相同的权重，CSS会以最后定义的属性为准，也就是“后来者居上”原则。

陈小栋

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的两大特性之继承性和层叠性

1.继承性 css的继承性指的是子元素会继承父元素的某些样式属性。例如在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色，不过，并不是所有的属性都会被子元素继承，如margin，padding，border等就不具备继承性。在css中，具有继承性的属性有三大类:文本相关的属性:font-family、font-size、font-style、font-wei
复制链接

扫一扫

专栏目录