Vue 2 中 scoped 通过编译时为元素添加唯一 data-v-xxx 属性并重写选择器（如 .header → .header[data-v-xxx]）实现样式隔离，确保仅作用于本组件及其子组件根元素，避免全局污染。
Vue 2 中使用 scoped 是防止组件样式污染全局环境最直接、最推荐的方式。它不依赖额外配置，开箱即用，核心就是让样式“只认自己家的元素”。
scoped 的基本用法很简单
在单文件组件（.vue）的 <style> 标签上加上 scoped 属性即可：
<style scoped>
.header { font-size: 18px; color: #333; }
.content p { line-height: 1.6; }
</style>这样写的样式不会影响其他任何组件，哪怕别的组件也有 .header 或 p，也不会被这段 CSS 改变。
scoped 是怎么做到隔离的
Vue 2 在编译时会做两件事：
立即学习“前端免费学习笔记（深入）”；
- 给当前组件所有 DOM 元素自动添加一个唯一属性，比如
data-v-2a1b3c4d - 把你的 CSS 选择器重写成带这个属性的形式，例如：
.header[data-v-2a1b3c4d] { font-size: 18px; }
所以样式只匹配带该属性的元素——也就是本组件内的元素，天然避开全局作用域。
需要注意的几个关键点
-
子组件根元素也会被自动注入相同 data-v-xxx 属性，所以父组件 scoped 样式能影响子组件的根节点，但无法穿透到子组件内部更深层的结构（比如
<el-input>里的 input 标签） -
后代选择器仍有效，例如
.wrapper .btn会被转为.wrapper[data-v-xxx] .btn[data-v-xxx]，但要小心它可能意外匹配子组件中同名类 -
不能在
<style scoped>里用@import引入外部 CSS，那样导入的规则依然受 scoped 限制，第三方类名（如.el-button）根本匹配不到 -
全局样式必须另起一个不带 scoped 的 <style> 块，比如重置样式、字体定义、工具类等，应放在
App.vue或单独的main.css中引入
需要穿透 scoped 时怎么办
当你要定制第三方组件（如 Element UI）内部样式时，scoped 默认拦住了你。这时要用深度选择器：
<style scoped>
/* Vue 2 推荐写法 */
::v-deep .el-input__inner {
border-radius: 4px;
}
</style>注意：::v-deep 不是 CSS 标准语法，而是 Vue 的编译提示符，会被 vue-loader 转换为可穿透的规则。它只在当前组件生效，不影响全局。
