抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

层叠性

层叠性指当标签被设置了多个重复的样式时,一个属性会被覆盖。

不考虑优先级,层叠性遵循“就近原则”。如下,最终颜色为绿色。

1
2
3
4
5
6
div{
color:red;
}
div{
color:green;
}

继承性

继承性是指子标签没有设置样式时,继承父标签样式。

继承性只适用于字体的颜色,大小、行间距等文本类属性,边框、外边距、内边距、定位、元素高度等与块级相关属性不能继承。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<style>
div{color:green;font-size:20px;}
</style>
</head>
<body>
<div>
<span>
我是绿色的
</span>
</div>
</body>
</html>

优先级

!important > 行内样式 > ID 选择器 > 类(伪元素、伪类、属性)选择器 > 元素选择器

权重相同时,遵循“就近原则”;权重不同时,权重大的生效。

image-20210412185424611

注意
继承的权重为0

权重叠加:
div ul li —-> 0,0,0,3
.nav ul li —-> 0,0,1,2
a:hover —-> 0,0,1,1
#first .nav —-> 0,1,1,0

评论