前言
CSS 中的权重 (Specificity) 是用于确定哪些规则将覆盖其他规则的重要性指数。
每个选择器都有一个权重值，通过计算每个选择器的标签数量、类数量、ID数量等来计算。 值越高的选择器优先级越高，当多个规则应用于同一元素时，最终应用的样式将是具有最高优先级的规则。
css 优先级
css 优先级分为两大类：继承和级联
继承
CSS 属性可以被标记为 "可继承"，这意味着这些属性可以被父元素继承。例如，font-family、color、line-height 等属性通常是可以被子元素继承的。在这种情况下，继承的优先级低于已经在元素本身上设置的样式规则。
inherit 关键字可以让元素继承父元素的属性，可以用来覆盖原来的值
<style>
.a {
font-size: 18px;
}
</style>
<body>
<div class="a">
A
<div class="b">
B
</div>
</div>
</body>
例如上面的样式当中，我们为 .a 设定了一个 18px 的字体大小，然后 .b 这个元素就会继承这个字体
当我们修改了 .a 的字体大小的时候， .b 就会跟着一起被改动
当我们看到 .b 的样式时，也可以发现继承来源
级联
当同一元素上存在多个 CSS 规则时，级联优先级就会起作用。对于每个规则，浏览器都会计算它的特定权重（Specificity），并尝试将它们应用到元素上。
在我们上面说到的继承，继承和级联优先级虽然有关联，但是不是完全相同的概念。
继承是指父元素的样式会自动应用到它的子元素上，如果子元素没有指定特定的样式，那么就会继承父元素的样式。继承的样式没有特定的优先级，它们会被应用到所有的子孙元素上。
而级联优先级则是用于定义选择器应该如何应用到特定元素上的规则。在存在多个选择器的情况下，它们会根据其特定的权重（Specificity）被浏览器解析并应用到元素上。具有更高权重的规则将覆盖权重较低的规则。
当存在继承样式和级联样式时，级联样式通常具有更高的优先级并会覆盖继承样式。例如，如果一个父元素有 color: red 的样式，而它的子元素具有 color: blue 的样式，那么子元素将应用其自己的样式，而不是继承来自父元素的红色颜色。
<style>
.a {
font-size: 18px;
}
.b {
font-size: 48px;
}
</style>
<body>
<div class="a">A
<div class="b">B
</div>
</div>
</body>
层级规范
- 设置了 !important 的浏览器内置样式
- 设置了 !important 的用户设置样式
- @layer 规则中的 !important 样式
- 开发者设置的 !important 的 样式
- animation 动画 / Transition 过渡声明
- 开发设置的 css
- @layer 规则样式
- 用户设置的样式
- 浏览器内置样式
开发者设置的css
对于一般的开发者，使用的最多的就是开发者设置的css，其中又可以细分为
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
@layer 规则样式
@layer又名级联层，是 css2022 推出的新特性，目的是用来解决样式被覆盖，使用混乱的场景。
同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制，让 CSS 样式按照我们定义好的级联顺序展示，起到控制不同样式间的优先级的作用。
我们可以用
@layer a {
div {
background-color: red;
}
}
的语法来创建一个名字为a的级联层
主要可以用于 css 进行模块的划分，更好的控制样式。
