Vue中scoped样式的核心是为添加scoped属性，使CSS仅作用于当前组件：编译时自动为模板元素添加唯一data-v-xxx属性，并将选择器重写为.class[data-v-xxx]形式实现隔离。

在 Vue 单文件组件（.vue）中编写 scoped 局部样式，核心就是给 标签加上 scoped 属性。它会让样式只作用于当前组件的模板元素，不会影响其他组件，也不被其他组件的样式影响。

怎么写 scoped 样式

直接在 标签中添加 scoped 属性即可，支持原生 CSS、SCSS、Less 等预处理器：

Vue 编译时会自动为组件内所有 DOM 元素添加一个唯一属性（如 data-v-abc123），同时把你的 CSS 选择器重写为带该属性的形式，比如 .box → .box[data-v-abc123]，从而实现局部作用域。

scoped 对哪些元素生效

它会作用于当前组件模板中的所有普通元素，包括根节点和内部子节点：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 静态写在 里的元素，全部自动带上 data-v-xxx
• 用 v-for、v-if 动态生成的元素，也会带上该属性
• 但通过 v-html 插入的 HTML 字符串，其内部元素不会自动加属性，因此 scoped 样式不作用于它们

想影响插槽或子组件怎么办

默认情况下，scoped 样式不会穿透到 内容或子组件内部——因为那些 DOM 实际属于父/外部上下文，没有当前组件的 data-v-xxx 属性。

如果确实需要控制插槽内容或第三方子组件的样式，可用深度选择器：

• :deep(.child-class) { color: blue; } —— 影响插槽里或子组件内的 .child-class
• :slotted(.slot-item) { font-weight: bold; } —— 专门针对 中的元素
• :global(.global-btn) { background: green; } —— 跳出 scoped，写全局样式

常见注意事项

避免几个典型误区：

• App.vue 一般不加 scoped：它是根组件，常需提供基础布局或全局 UI 规则，加了反而限制太多
• 子组件根元素会受父组件 scoped 样式影响：比如父组件写了 .child[data-v-xxx] { margin: 10px; }，而子组件根节点是
  ，那这个 margin 会生效
• 慎用通配符或标签选择器：像 p { } 或 div { } 在 scoped 下仍只作用于本组件，但容易误伤语义结构，建议优先用类名