标签选择器（如input、button、img）因权重低（0,0,1）却全量匹配dom中所有对应标签，导致样式全局生效，穿透第三方组件；解决需划清作用边界，而非堆砌选择器 specificity。
标签选择器（如 input、button、img）本身没有语义归属，浏览器会无差别匹配所有对应标签——它不关心你写在哪个组件、哪个文件，只要 DOM 里有那个标签，样式就生效。
为什么 input 一写就影响整个页面
根本原因不是你“多写了”，而是 CSS 层叠机制天然偏向全局覆盖：
- input 权重仅 0,0,1，但它是全量命中——页面里每个 <input> 都会被捕获，包括第三方组件内部动态生成的节点（比如 el-input 渲染出的 <input class="el-input__inner">）
- 框架（如 Bootstrap）或重置库（如 normalize.css）常靠 input、button 等标签做基础样式归一，一旦你项目里也定义了 input { padding: 8px; }，它就会和这些基础规则直接对撞
- 后加载的样式胜出，而构建工具打包时 CSS 文件顺序不可控，尤其异步加载的 UI 库样式可能晚于你的全局 input 规则
img 被改边框/圆角后，el-image 也变形了
这不是巧合，是典型穿透现象：
- el-image 最终渲染为 <img src="...">，逃不开你写的 img { border-radius: 4px; }
- 即使你给容器加了 scoped 或用了 CSS Modules，这些方案只管你自己写的类名，对原生标签选择器完全无效
- 更隐蔽的是继承：父级设了 div * { max-width: 100%; }，子组件里所有 img 都被强制约束，连 background-image 的伪元素都可能受影响
如何让 button 只作用于你自己的按钮
别试图靠“更具体的选择器”打补丁，优先从源头切断匹配路径：
- 改用带明确边界的类名，比如把 button { ... } 换成 .my-app-button { ... }，再配合 BEM 的 .my-app-button__icon 拆解结构
- 如果必须用标签选择器（例如重置），把它包裹进 @scope（需现代浏览器支持）：
@scope (.my-app) { button { padding: 6px 12px; } }
- 在构建层拦截：用 PostCSS 插件（如 postcss-prefixwrap）自动为整块 CSS 加前缀，把 button 编译成 .my-app button
- Vue / React 中，用 :deep(button) 或 button 作为子选择器时，确保外层有唯一容器 class（如 <div class="user-form">...</div>），否则 .user-form :deep(button) 仍可能漏掉动态挂载到 body 的弹窗按钮真正麻烦的从来不是写错一个选择器，而是你写的 button 和别人写的 button 共享同一片 DOM 土壤——没有隔离边界，就没有可控性。BEM、CSS Modules、@scope 这些方案本质都是在给这片土壤划地界，而不是反复喷洒除草剂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
