1.Vue中的style标签上有一个特殊的属性scoped。当style标签拥有scoped属性时候，它的css样式只能作用于当前的Vue组件，防止组件之间污染。
2.PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，这种做法使得样式只作用于含有该属性的dom元素。
转译前
<style scoped>
.eg{
color:red;
}
</style>
<template>
<div class="eg">scoped测试</div>
</template>
转译后
.eg[data-v-5555666a] {
color: red;
}
<template>
<div class="eg" data-v-5555666a>scoped测试</div>
</template>
3.scoped穿透
普通css的样式穿透 使用>>>
//外层 >>> 第三方组件
.wrap>>> .el-input__inner{
height: 1rem;
}
sass和less的样式穿透 使用/deep/
//外层 /deep/ 第三方组件
.wrap /deep/ .el-input__inner{
height: 1rem;
}
其他方法
1.在vue组件中使用两个style标签，一个加scoped属性，一个不加scoped属性，把需要覆盖的css样式写在不加scoped属性的style标签中。
2.建一个css文件，里面写覆盖的css样式，在入口文件main.js 中引入。
3.在vue组件中不使用scoped属性。
原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。
