Vue.js 组件 CSS Modules 与深度选择器详解-Vue.js-PHP中文网

Vue样式管理两大核心能力：CSS Modules实现类名哈希化与作用域隔离，解决命名冲突；:deep()提供可控的scoped穿透，专用于定制第三方组件样式，二者定位不同、常配合但不可替代。

vue.js 组件 css modules 与深度选择器详解

Vue 中的样式管理有两个关键能力：一是用 CSS Modules 实现类名自动哈希化与作用域隔离，二是用 深度选择器（如 :deep()）有控制地穿透作用域。二者定位不同——CSS Modules 解决“命名冲突”，深度选择器解决“样式穿透”，常配合使用但不可互相替代。

CSS Modules：类名自动隔离，杜绝全局污染

CSS Modules 不是 Vue 专属，而是构建工具（如 Vite、Webpack）支持的模块化方案。启用后，每个类名会被编译为唯一哈希值，天然避免样式覆盖。

写法：在标签中定义样式，类名通过 $style 对象注入模板

示例：

<template><div :class="$style.container">
    <span :class="$style.text">Hello</span>
  </div>
</template><style module>
.container { margin: 1rem; }
.text { color: #333; font-weight: bold; }
</style>

编译后类名类似 container_abc123，且仅在当前组件生效，第三方组件或父组件无法意外匹配到
注意：module 和 scoped 互斥，不能同时使用；它不依赖 data-v-xxx 属性，而是靠 JS 动态绑定类名

:deep()：精准穿透 scoped，只改需要改的部分

当使用时，子组件内部元素默认不受影响。:deep() 是 Vue 3 官方推荐的穿透语法，告诉编译器：“这部分选择器不加作用域属性”。

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

语法必须带括号，且只能用于伪类位置：:deep(.el-input__inner) ✅，.el-input :deep .el-input__inner ❌（缺少括号）
编译结果是 .parent[data-v-xxx] .el-input__inner ——父选择器仍受作用域限制，子选择器完全放开
支持嵌套穿透：:deep(:deep(.icon)) 可连续穿透两层，适合多级封装组件
慎用于挂载到 body 的弹窗类组件（如），因其 DOM 不在当前组件树内，:deep() 失效，此时应改用全局样式或 :global()

何时用 CSS Modules？何时用 :deep()？

二者适用场景明确区分：

CSS Modules：适合你完全掌控的组件体系，尤其是团队协作或大型项目中，防止 btn、header 等通用类名冲突
:deep()：专用于定制第三方组件库（Element Plus、Ant Design Vue 等）或他人封装的黑盒组件，你无法修改其源码，只能从父组件“打洞”式调整样式
组合用法常见：父组件用 scoped + :deep() 调整子组件样式，子组件自身用 module 管理内部结构，既隔离又可控