解决vue中样式不起作用：样式穿透/深度选择器(/deep/)

原因1：组件内部使用组件，添加了scoped属性

```

转义后：

```javascript

.example[data-v-469af010] {

  color: red;

}

```

由此可知，添加scoped属性的组件，为了达到不污染全局，做了如下处理：

1. 给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性。

2. 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局。

3. **如果组件内部还有组件**，这里是重点------*只会给最外层的组件里的标签加上唯一属性字段 *------重点结束，不影响组件内部引用的组件（ 注意 ）。

**解决方法：**

样式穿透，从官方文档了解到，我们所谓的穿透，官方叫做深度选择器。

怎么用的呢 ?就是在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。

官方还说>>>可能存在问题，建议用后两者，就选择 /deep/ 。

**实现原理：**

没加穿透前

```javascript

.wrap .example[data-v-469af010] {

  color: red;

}

```

加了穿透后：

```javascript

.wrap[data-v-469af010] .example {

  color: red;

}

```

以上对比可以看出穿透只是改变了data-v-469af010标志唯一性的位置，使其可以生效。

## 二、动态加入的html

这个就不多说了，和上面基本一样，动态加入的html没经过转译，没有对应的data属性，所以也不会起作用。

## 三、非以上两种

程序员常犯的错误，该好好看看自己的代码了，自己是不是写了什么马虎代码。

总结：如果以上分析给你解决了你的问题或困扰，就点个赞吧~~