在 vue 3 单文件组件中开启 css 作用域，只需给 标签添加 scoped 属性（小写、无引号、无等号），vue 3 会自动为元素添加 data-v-xxxx 属性并重写选择器，确保样式仅作用于当前组件，且默认不穿透影响子组件。
在 Vue 3 单文件组件中开启 CSS 作用域，只需给 <style></style> 标签加上 scoped 属性，不需要额外安装插件或配置——只要项目使用标准构建工具（如 Vite + @vitejs/plugin-vue）即可自动生效。
怎么写才正确
✅ 正确写法（仅一个单词，小写，无引号、无等号、无冒号）：
<style scoped>
.example { color: #42b883; }
</style>
❌ 常见错误写法（全部无效）：
-
<style scope></style>（拼错单词） -
<style scoped="true"></style>（加了属性值） -
<style :scoped="true"></style>（误当响应式绑定） -
<style scopescopped></style>（手滑打错）
它实际做了什么
Vue 3 在编译时会自动完成两件事：
- 为当前组件所有根级及子级元素添加唯一标识属性，例如
data-v-1a2b3c4d - 把你的 CSS 选择器重写为带该属性的形式，比如
.example→.example[data-v-1a2b3c4d]
这样，样式就只匹配本组件内的元素，不会影响其他组件里同名 class 的 DOM。
为什么子组件没被影响？正常吗
完全正常。scoped 的设计目标就是**不穿透**——父组件的 scoped 样式默认对子组件无效。比如父组件写了 .btn { padding: 6px; }，子组件里也有 <button class="btn"></button>，也不会变内边距。
若确实需要修改子组件内部样式（如定制第三方 UI 组件），可用：
-
::v-deep(.target) { ... }（推荐，作用于当前 scoped 块内） -
:deep(.target) { ... }（Vue 3.3+ 新语法，功能相同） - 或直接在子组件自己的
<style scoped></style>中定义
什么时候不该用 scoped
以下情况建议不用 scoped，改用普通 <style></style> 或 <style module></style>：
- 需要全局复用的基础样式（如重置样式、字体变量、工具类）
- 要被多个组件动态注入的 CSS 变量（如主题色）
- 组件库主题覆盖逻辑较复杂，且需稳定穿透时（此时可结合
:global()）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
