原因1：組件內部使用組件，添加了scoped屬性<style scoped>；
原因2：動態(tài)引入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節(jié)點加一個不重復屬性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標志唯一性的位置，使其可以生效。
## 二、動態(tài)加入的html
這個就不多說了，和上面基本一樣，動態(tài)加入的html沒經過轉譯，沒有對應的data屬性，所以也不會起作用。
## 三、非以上兩種
程序員常犯的錯誤，該好好看看自己的代碼了，自己是不是寫了什么馬虎代碼。
總結：如果以上分析給你解決了你的問題或困擾，就點個贊吧~~
