一、层叠性

层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的样式的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点

层叠性的作用方式

  1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

  2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

    层叠的覆盖机制

    CSS声明的源

    上文提及来自多个源，而浏览器样式的源主要有如下

  3. user agent用户代理样式表

  4. local user本地用户样式表
  5. site author网站作者样式表

    CSS来自不同源样式的优先级

    c62f92e56778491eb0c689491215c826_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp

    图片备注

    1. @layer是2021年新增的级联层样式，如有感兴趣可以自己了解，这里可以忽略，我们只需在意如下内容即可

    UA < local < site < site(!important) < local(!important) < UA(!important)

    1. 其实还有一个冷知识，animation动画样式属于不同的源，其优先级位于图中site normal与site !important之间

CSS来自同一源样式的优先级

这里请注意下文CSS三大特性之一“优先级” （其实个人感觉优先级这个特性不该独立出来，而是应该属于层叠性的一部分）

二、继承性

继承性类似于子承父业，样式属性是否具有继承性是已规定的，对于具有继承性的属性子元素会默认继承父元素的样式，而这就是继承性
同时CSS中还存在全局关键字，如inherit(继承),initial(初始化),unset(未装配),revert(还原)，而使用关键字inherit可以使非继承属性采用继承的策略

CSS全局关键字 类似HTML标签拥有全局属性，CSS也拥有全局的属性值，同时这些值同时是关键字（可理解为固定单词）

浏览器默认样式与继承属性的来源 准确讲应该成为用户代理样式表，其规定有各个元素的默认样式（这也是写任意项目时都会先引入reset css重置样式表来覆盖浏览器默认样式） 同时继承属性最终的来源来自于：只有根元素的继承属性会取至默认值，而子元素的继承属性均取至于父元素

三、优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

选择器 选择器权重
标签选择器 0,0,0,1
类选择器，伪类选择器，属性选择器 0,0,1,0
ID选择器 0,1,0,0
style行内样式 1,0,0,0
!important 分组判断
通配符选择器 0,0,0,0
关系选择器 无权重

继承和通配符选择器的冲突

继承和关系选择器是没有优先级权重的意思是无，而不是零(比较上，无权重比零权重更小)，请注意
因此将会造成一种现象，通配符选择器会作用于所有元素，这将会导致继承的样式属性与通配符选择器的样式声明发生层叠并被0优先级的通配符选择器覆盖

!important声明权重判断

对于!important会将当前样式声明标注为重要其权重并非网上说的无穷大的权重，而是分组判断，其声明会将该样式判定为不同的源，而CSS优先级其实仅仅是同一源的判断准则