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

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

原因2：动态引入html，也添加了scoped属性；

原因3：非以上两种；

一、添加了scoped属性:

Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:

<style lang="less" scoped>
    .example{
        color:red;
    }
</style>
<template>
    <div class="example">scoped测试案例</div>
</template>

转义后：

.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。
官方还说>>>可能存在问题Vue 2.x无效，建议用后两者，就选择 /deep/ 。

实现原理：
没加穿透前

<style scoped lang="less">
    .wrap .example {
        color: red;
    }
</style>

.wrap .example[data-v-469af010] {
  color: red;
}

加了穿透后：

<style scoped lang="less">
    .wrap /deep/ .example {
        color: red;
    }
</style>

.wrap[data-v-469af010] .example {
  color: red;
}

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

二、动态加入的html

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

三、非以上两种

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

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