标签选择器必然造成全局样式污染。因其不区分上下文，所有匹配元素无差别生效，且无法随组件卸载回收，易与第三方库冲突；应通过作用域锚点（如[data-scope]）、BEM命名或CSS Modules限定范围，并借助工具拦截未包裹的标签选择器。
直接用 div、p、img 这类标签选择器，等于主动把样式敞开门放行——它不挑位置、不认上下文，所有匹配元素无差别生效。这不是“可能”污染，而是必然污染。
为什么标签选择器一用就出事
浏览器对 div 这种选择器没有“这是你组件里的 div”这种概念，只看“是不是 div 标签”。你在一个组件里写 div { margin: 0 } ，整个页面所有 div 都会丢掉 margin，包括第三方弹窗、富文本渲染块、甚至 React 的内部容器。
- 优先级低但覆盖范围极广：一个
div规则会被更具体的选择器（如.card__content）轻松覆盖，但一旦漏写或写错，影响就是全站级的 - 无法随组件卸载而回收：不像 CSS Modules 或
:local()生成的哈希类，标签选择器一旦注入，就永远在全局样式表里躺着 - 与第三方库天然冲突：比如
img规则会直接干扰highlight.js的代码高亮图片、Ant Design 的 avatar 图片、甚至react-markdown渲染出的图片
替代方案：用类名 + 显式作用域锚点
不是不能控制 div，而是得把它“关进笼子”。关键不是删掉标签选择器，而是切断它和全局的连接。
- 给外层容器加唯一标识：
<div data-scope="article-detail">...</div>，然后写[data-scope="article-detail"] div—— 这样哪怕用了标签选择器，也只在这一块生效 - 配合 BEM 块名兜底：
.article-detail div比裸div强，但要注意.article-detail必须是稳定、不被动态增删的类名 - 服务端渲染静态 HTML 时，若无法控制内层结构，可用前缀匹配：
.article-content [class^="hljs-"]替代.article-content pre code，避免因库升级导致选择器失效
CSS Modules 下仍要防标签选择器泄漏
开了 modules: true 不代表安全。很多人在 xxx.module.css 里写 div { padding: 8px }，结果构建后还是生成全局 div 规则——CSS Modules 只哈希类名，不处理标签、伪元素、属性选择器。
立即学习“前端免费学习笔记（深入）”；
-
:global(div)是显式放行，慎用；:global(.ant-btn)同理，必须加限定：:global([data-scope="user-form"] .ant-btn) - PostCSS 插件
postcss-safe-parser可配置拦截未包裹的标签选择器，CI 中报错阻断提交 - VS Code 安装插件 “Auto Rename Tag”，配合 ESLint 规则
no-unused-selector，能提前发现孤立的span、ul规则
真正麻烦的不是写错一行 img，而是团队里有人觉得“就改个图片边框，用标签最省事”。等上线后发现所有 markdown 图片圆角失效、头像被强制加阴影、甚至 SVG 图标尺寸错乱，才明白：标签选择器的破坏力，不在于它多强大，而在于它太安静——出问题时，没人记得自己写过它。
