跨域问题 CROSS

CSS 选择器权重（Specificity）

是什么

CSS 选择器权重（Specificity） 本质上就是：浏览器用来决定 多个 CSS 规则同时作用在同一个元素时，谁生效的规则。

也就是说，当 多个样式冲突 时，浏览器需要一个规则判断：到底用哪一条CSS？

这个规则就是 选择器权重。

案例引入

<button class="btn">按钮</button>

button{
  color: red;
}

.btn{
  color: blue;
}

两个样式都匹配，但是最终结果是蓝色

因为：class 权重 > 标签权重

权重的本质

浏览器会把每个选择器转成 一个四位数：(a , b , c , d)

位	代表
a	行内样式 style=””
b	id选择器
c	class / 属性 / 伪类
d	标签 / 伪元素

浏览器比较规则：从左往右比较

例如：

0,1,0,0
0,0,3,0

先看第二位：1 > 0；所以第一条赢。

常见选择器权重

选择器	权重
*	0,0,0,0
div	0,0,0,1
.btn	0,0,1,0
.btn.active	0,0,2,0
#app	0,1,0,0
style=""	1,0,0,0

举几个真实例子

1. button
   • 权重：0,0,0,1
2. .btn
   • 权重：0,0,1,0
3. .el-pagination .btn-next
   • 包含两个 class，所以权重0,0,2,0
4. #app .btn
   • #app → id，.btn → class ；那么权重：0,1,1,0

权重比较规则

比较四位数的大小

假设两个规则：

A: 0,0,2,0
B: 0,0,1,5

比较：先看 id；再看 class；再看 tag

所以：A 胜出；因为：2 > 1

最高优先级!important

有一个特殊规则：!important它的优先级高于所有普通CSS

.btn{
  color:red !important;
}

后写覆盖前写

如果权重相同，后写覆盖前写

.btn{
  color:red;
}

.btn{
  color:blue; // 优先级更高
}

CSS 谁生效的顺序

!important
↓
行内样式
↓
id
↓
class
↓
标签
↓
代码顺序

@layer

什么是 @layer

@layer 是 CSS Cascade Layers（层叠层），是 CSS 新增的一套 控制样式优先级的机制。

它的核心目的只有一个：让 CSS 覆盖关系更可控，而不是只靠选择器权重和代码顺序。

@layer 可以把 CSS 分成不同的 层（layer）。

@layer base {
  button {
    color: red;
  }
}

@layer components {
  .btn {
    color: blue;
  }
}

这里有两个层：base和components

浏览器在计算 CSS 时，会先比较 layer 的顺序。

layer 的核心规则

普通CSS > layer CSS

没有 layer 的样式优先级更高。

@layer test {
  .btn {
    color: red;
  }
}

.btn {
  color: blue; // 优先级高
}

layer之间按顺序比较

@layer base {
  .btn {
    color: red;
  }
}

@layer components {
  .btn {
    color: blue;
  }
}

顺序是：base — > components

那么：components > base

结果：blue

同一个 layer 内按正常 CSS 规则

如果在同一个 layer：后写覆盖先写

@layer demo {

  .btn {
    color: red;
  }

  .btn {
    color: blue; // 优先级高
  }

}

layer 顺序可以提前声明

可以先定义 layer 顺序：

@layer base, components, utilities;

然后写样式：

@layer base {
  button { color:red; }
}

@layer utilities {
  .text-blue { color:blue; }
}

顺序固定为：

base
components
utilities

不受 CSS 文件顺序影响。