层叠性

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

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

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