CSS三大特性

在css中，我们在设计样式的时候，经常会出现我们明明写好了样式，但是最后的测试发现我们书写的样式并没有起作用。

除开样式书写错误之外。还有大部分情况就是css样式的三大特性导致的问题。

首先，我们要知道css有哪三大特性：

• 层叠性
• 继承性
• 优先级

层叠性

定义：

层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。（也就是就近原则）

p {
    color: red;
}
p {
    color: blue;
}
//最后浏览器实现的是：blue
复制代码

这就是因为层叠性的原因，因为层叠性在权重相同的情况下是根据样式出现先后顺序来决定的，所以最后的样式将会覆盖前面的样式。

注意：

当出现相同样式且权重相同的情况的时候，那么css层叠性就会起作用。简单来说就是：样式不冲突，不会层叠；样式冲突权重相同，遵循就近原则。（也就是层叠性）

继承性

我们可以简单的理解为：当我们在一个元素上设置了样式，那么这个样式就会被继承到所有的子元素上。（子承父业）

div {
    color: red;
}
<div>
    <span>我是什么红色</span>
</div>
复制代码

最后代码运行出来 ：span标签里面的字体为红色，但是我们并没有单独给span写颜色样式，所以它的颜色为父元素的颜色。就是说，span标签的颜色是div标签的颜色，继承了腹肌元素的属性。

注意：

1. 合理使用继承性可以简化代码，减少代码量。在我们设计中，字体、字号、颜色、行距等有关文本属性的属性是具有继承性的，我们可以在body中统一设置，然后影响整个代码。
2. 并不是所有的属性都可以继承，与块元素相关的属性都不可以继承，例如：边框、外边距、内边距、背景、定位、元素高度等等。

优先级

在了解什么是优先级之前，我们要先知道什么是权重，以及权重怎么计算。

css会根据权重高低来决定执行哪一个属性：

权重

权重计算

1.在我们css权重计算中，不会存在什么多少进制的说法，也就是说10个标签选择器的权重等于0,0,0,10,并不会等于0,0,1,0。也就是说无论多少个标签选择器，最后它的权重也不会比一个类选择器高。 2.前面我们讲述了层叠性。二者有一些联系：权重用来计算优先级，层叠用来表现优先级。

优先级

优先级就是在样式完全相同的情况下，权重高的样式会优先使用。

最后总结一下优先级的顺序：

!important > 行内样式 > id选择器 > 类/伪类选择器 > 标签选择器 > 继承/通用选择器