CSS三大特性#

常说的三大特性分别是层叠性、继承性和优先级，它们的区别如下：

最容易混的是 层叠性和优先级，因为它们有一定的关系，多个 CSS 样式同时作用于同一个元素时，最终会按照规则决定哪些样式生效，这个规则就是优先级

层叠性#

说白了就是同一个元素被设置了多个相同属性，一层一层叠加，就是CSS的层叠性。

1
<div class="content">这是一个div</div>
2
.content {
3
  color: aqua;
4
}
5
div {
6
  background-color: bisque;
7
}

这样叠加了color和background-color属性，但是叠加会引诱出另外一个性质：优先级，当一个样式重复叠加的时候，应该生效哪个样式呢，这时候就需要优先级来判断

优先级#

叠加性通常会引发样式冲突，到底哪个样式生效，这时候就需要：选择器权重计算

• id权重 > class权重 > 标签权重
• 复杂选择器可以通过（id的个数, class的个数, 标签的个数）的形式，计算权重

那再极端一些，权重一样呢，那就按照后写覆盖先写的，就近原则，直接写在标签内的样式生效->嵌入页面的生效->引入的生效

继承性#

后代元素可以继承父元素的部分属性：父元素如果有可继承的属性，再其后代都会基础这个属性；继承属性会沿着 DOM 层级向后代元素传递，不限于直接子元素。

常见可继承：

1
color
2
font-size
3
font-family
4
font-weight
5
line-height
6
text-align