层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠性主要解决样式冲突的问题。那么,css是如何处理的呢

层叠计算分为三个步骤：优先级、特殊性(特定性)、源次序

步骤一： 优先级

优先级: 比较样式的来源

1. 作者样式表中带 !important
2. 浏览器默认样式表带 !important
3. 作者样式表普通样式
4. 浏览器默认样式表普通样式

优先级从上到下依次递减 如果在步骤一没有解决冲突就进入步骤二

从上图可见，我们自己写的样式会把浏览器默认样式给覆盖掉

步骤二： 特殊性(特定性)

特殊性就是大家经常说的权重

每一个样式都可以用四段数字表示(A,B,C,D),这四段数字级别从左往右依次降低

第一段A: 只能是0或1，内联样式为1，否则就是 0

第二段B: 样式所处的选择器有多少个ID选择器

第三段C: 样式所处的选择器有多少个类选择器、属性选择器、伪类选择器

第四段D: 样式所处的选择器有多少个元素选择器、伪元素选择器

我们一般比较的都是外联样式的css，所以一般我们看到都是后三段

css
#app .container.page-home[type="user"] .home-banner a:hover{
      color: burlywood;
    }

图片中显示的特定性数字是怎么计算来的呢？

id选择器有一个:

• #app 类选择器、属性选择器、伪类选择器有5个:
• .container
• .page-home
• [type="user"]
• .home-banner

元素选择器、伪元素选择器1个

• a

所以特定性(1,5,1)

步骤三: 源次序

css样式从上到下扫描，下面的会覆盖上面的