权重相同时样式生效取决于声明顺序，但构建工具易打乱该顺序，故应通过组合选择器、属性选择器或容器限定等提升特异性来可靠提权。
直接结论：权重相同时，样式生效完全取决于 CSS 文件或规则的声明顺序，不是“随机”，而是“确定但易被忽略”。解决的关键是主动打破权重相等，而不是赌加载顺序。
为什么 .btn 和 .el-button 总是互相覆盖
两者都是单个类选择器，specificity 都是 0,0,1,0。浏览器不会“随机选一个”，而是严格按解析顺序取后声明者——但这个顺序常被构建工具打乱（如 Vite 的 CSS 提取顺序、动态 <style></style> 插入）、被第三方库 runtime 注入干扰，导致你在本地看着好使，上线就翻车。
- Element Plus 的
.el-button可能来自element-plus/dist/index.css，而你写的.btn在src/styles/main.css，但构建后谁在前谁在后，得看插件配置 - Tailwind 的
text-blue-500是工具类，和.n-button权重一样（0,0,1,0），谁赢只看打包后 CSS 字符串里哪条规则排在后面 - Vue SFC 的
<style scoped></style>会加哈希后缀，但若你用:global(.el-input)穿透，又没写全路径，很容易漏掉父级上下文，导致权重不升反降
用组合选择器精准提权，别堆 class
很多人试过 .btn.btn.btn-primary，以为多写几次 class 就能赢——其实还是 0,0,1,0，权重没变。真正有效的是引入新层级：
- 给业务容器加唯一类名，比如
div#app改成div.my-dashboard，然后所有自定义样式都基于它：.my-dashboard .btn（权重0,0,2,0） - 用属性选择器锚定语义：
button[data-role="primary-action"]（权重0,0,1,1，比纯 class 高一级） - 避免
body .btn：body 贡献的只是 d 位 +1，而现代 UI 库早用div#app .el-button（0,1,1,1）压你，body 根本不够看 - 慎用 ID：虽然
#header .btn权重高（0,1,1,0），但在 Vue/React 里 ID 常动态生成或重复，稳定性差
构建时自动加前缀比手写更可靠
手动在每个选择器前加 .my-app 容易漏、难维护。交给构建工具才是工程化做法：
- Vite 用户装
vite-plugin-css-prefix，配prefix: '.my-app '（注意空格） - PostCSS 用户用
postcss-prefix-selector，必须设exclude: [/^\.my-/]，否则会把你的.my-btn错转成.my-app .my-btn - Webpack 的
css-loader可配modules.auto+localIdentName，但仅限模块内；对外部组件提权仍需前缀插件 - 确认容器类名全局唯一：别叫
.ant-sandbox或.tailwind-scope，防止和框架内部类撞名
调试时盯死 Computed 面板里的 Specificity 字段
别猜，打开 DevTools → 选中元素 → Computed → 找到被划掉的规则 → 点开看右侧 “Specificity” 值（如 0,0,1,0）和 “Source” 行号。重点看三件事：
- 被划掉的规则来自哪个文件？是不是你根本没意识到它存在（比如某个插件的 reset.css）
- 生效的那条规则 specificity 是多少？是不是比你预想的高（比如用了
[type="submit"]属性选择器） - 有没有 inline style 或
style=""属性介入？它的权重是1,0,0,0，直接碾压所有外部规则 - 如果 Styles 面板里根本找不到你写的规则，先检查是否拼错 class 名、是否被
scoped隔离、是否在 Shadow DOM 里
最常被忽略的点：权重计算是逐位比较，不进位。哪怕你写了十个 class，只要没有 ID、没有属性选择器、没有标签名，它还是 0,0,1,0。提权不是堆料，是换维度——从“类名数量”转向“结构深度”或“语义精度”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
