如何在Vue3单文件组件中引入局部CSS_使用style标签的scoped属性-css教程-PHP中文网

通过编译时为元素添加唯一属性（如data-v-f3f42f0a）并重写css选择器实现样式隔离；第三方组件、v-html内容不自动带该属性；需用:deep()穿透子组件、:global()声明全局样式、:slotted()作用于插槽内容。

如何在vue3单文件组件中引入局部css_使用style标签的scoped属性

Vue3 SFC 中 `<style scoped></style>` 的作用机制

它不是简单地给元素加个 class 前缀，而是通过 Vue 编译器在构建时为模板中每个元素自动添加一个唯一属性（如 data-v-f3f42f0a），同时把 CSS 选择器也加上对应属性，实现样式隔离。这意味着：只有当前组件的根节点和子节点会被打上该属性，第三方组件或 v-html 插入的内容不会自动带上。

哪些选择器能生效，哪些会意外失效

scoped 对深层嵌套、动态类名、插槽内容的处理容易出问题，不是所有写法都如预期工作：

.btn { color: red; } ✅ 正常作用于本组件内带 class="btn" 的元素
div .btn ✅ 可以匹配子元素，但前提是 div 和 .btn 都在当前组件模板内
::v-deep(.el-input) ✅ 必须用这个伪类穿透作用于子组件（如 Element Plus 组件）内部，注意 Vue 3 中推荐写法是 :deep(.el-input)
:global(.reset-style) ✅ 用于声明全局样式，不参与 scoped 处理
.parent /deep/ .child ❌ 已废弃，不推荐，且在 Vite + Vue 3 中可能完全无效