css选择器在现代前端框架中不是被替代，而是被约束、封装和弱化：vue/react/angular通过scoped样式或css modules自动哈希类名，使全局.css中的.btn失效；需用:global()或:deep()穿透作用域，但会增加耦合风险；tailwind等原子化方案则绕开选择器逻辑，直接复用预定义utility class。
为什么框架里写 .btn 可能根本没生效？
Vue/React/Angular 默认启用样式作用域机制（如 Vue 的 scoped、React 的 CSS Modules），会自动为你的 .btn 类名添加哈希后缀（如 .btn[data-v-abc123]）。这意味着：
- 纯 CSS 文件里的
.btn规则无法匹配组件内渲染出的真实类名 - 全局样式需显式声明（如
:global(.btn)或html .btn）才能穿透作用域 - 父组件传入的 class 会被保留，但子组件内部的
class="btn"已被重写
:deep() 和 ::v-deep 是什么？
这是 Vue 为解决嵌套组件样式穿透提供的伪类（其他框架有类似机制，如 React 中用 cx() 或 styled-components 的 &）：
-
:deep(.el-input__inner)允许你在 scoped 样式中影响子组件内部元素 - 它本质是编译时重写选择器，把
:deep()替换为属性选择器前缀，不等于“取消作用域” - 过度使用
:deep()会导致样式耦合变强，更新子组件内部结构时容易断裂 - 注意：Sass/Less 中不能直接在嵌套规则里写
:deep()，需提一层或用/deep/（已废弃）
为什么 Tailwind 这类原子化 CSS 几乎不写传统选择器？
Tailwind 本质上绕开了“选中元素再加样式”的路径，转而用 utility class 直接映射到预定义样式声明：
- 你写的
class="text-blue-500 p-4 rounded"不触发任何自定义选择器逻辑，只是复用已编译好的原子规则 - 没有
.card-header这类语义类，也就没有“维护选择器层级”或“避免命名冲突”的负担 - 但副作用明显：HTML 变臃肿、响应式断点分散在 class 中、难以全局替换设计 token（比如一键换主色）
- 工具链（如
@apply）允许抽离组合，但一旦抽成.btn-primary，就又回到了传统选择器的维护问题上
真正容易被忽略的点：选择器权重在框架中更难调试
框架生成的 scoped 属性选择器（如 [data-v-abc123]）默认权重高于普通类选择器，但低于 !important 和内联 style。这意味着：
- 你用
!important覆盖框架组件样式，可能在下个版本因属性名变更而失效 - 第三方 UI 库（如 Element Plus、Ant Design）内部大量使用 BEM 或动态 class，手动覆盖时得先 inspect 真实 DOM 结构
- DevTools 里看到的 computed styles 常显示多条同名属性，来源却分散在
style标签、link引入的 CSS、JS 注入的 style 标签中，很难一眼判断哪条胜出
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
