原因1：组件内部使用组件，添加了scoped属性<style scoped>；
原因2：动态引入html，也添加了scoped属性；
原因3：非以上两种；
## 一、添加了scoped属性:
Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:
```javascript
<style lang="less" scoped>
.example{
color:red;
}
</style>
<template>
<div class="example">scoped测试案例</div>
</template>
```
转义后：
```javascript
.example[data-v-469af010] {
color: red;
}
<template>
<div class="example" data-v-469af010>scoped测试案例</div>
</template>
```
由此可知，添加scoped属性的组件，为了达到不污染全局，做了如下处理：
1. 给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性。
2. 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局。
3. **如果组件内部还有组件**，这里是重点------*只会给最外层的组件里的标签加上唯一属性字段 *------重点结束，不影响组件内部引用的组件（ 注意 ）。
**解决方法：**
样式穿透，从官方文档了解到，我们所谓的穿透，官方叫做深度选择器。
怎么用的呢 ?就是在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。
官方还说>>>可能存在问题，建议用后两者，就选择 /deep/ 。
**实现原理：**
没加穿透前
```javascript
<style scoped lang="less">
.wrap .example {
color: red;
}
</style>
.wrap .example[data-v-469af010] {
color: red;
}
```
加了穿透后：
```javascript
<style scoped lang="less">
.wrap /deep/ .example {
color: red;
}
</style>
.wrap[data-v-469af010] .example {
color: red;
}
```
以上对比可以看出穿透只是改变了data-v-469af010标志唯一性的位置，使其可以生效。
## 二、动态加入的html
这个就不多说了，和上面基本一样，动态加入的html没经过转译，没有对应的data属性，所以也不会起作用。
## 三、非以上两种
程序员常犯的错误，该好好看看自己的代码了，自己是不是写了什么马虎代码。
总结：如果以上分析给你解决了你的问题或困扰，就点个赞吧~~
