CSS的继承性和层叠性

最新推荐文章于 2023-01-12 01:05:47 发布

步入飞花

最新推荐文章于 2023-01-12 01:05:47 发布

阅读量198

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_42646178/article/details/119355963

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.继承性

HTML后代的元素会继承父类元素设置的样式。比如下图，给一个div设置颜色的样式为红色，其后代元素p元素的颜色也变了，这就是继承性。
在这里插入图片描述
但是并不是所有的样式都能继承，规则如下：

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。

2.层叠性

计算权重，用于决定使用哪个定义的样式。所有的权重计算，没有任何兼容问题！如下图权重低的样式将会被高的样式所覆盖。
在这里插入图片描述

计算权重

优先级为：!important>行间样式>id>class|属性>标签选择器>通配符
!important的优先级别最高，行间样式的值为1000，id选择器为100，class|属性选择器为10，
标签选择器选择器为1，标签选择器为0.
在这里插入图片描述
注意：上图中的数值不是我们日常生活中使用的10进制数值，而是256进制数！！

<html lang="zh,en">
<head>
	<title>权重计算</title>
	<meta charset="utf-8">
	<style>
        /* ID选择器：两个相加100 + 100 = 200 */
        #idDiv #idP {
            color: red;
        }
        /* 类选择器: 10 + 10 = 20 */
        .classDiv .classP {
            color:green;
        }
        /* ID选择器 + 标签选择器： 100 + 1 = 101 */
        #idDiv p {
            color: salmon;
        }
    </style>
</head>
<body>
	<div class="classDiv" id="idDiv">
		<p class="classP" id="idP">
			Test
		</p>
	</div>
</body>
</html>