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

；原因二：HTML是动态引入的，还添加了scoped属性；原因三：不是以上两个；1、增加scoped属性：Vue中scoped属性的作用主要是通过PostCss实现的。以下是翻译前的代码：.example{color:red;}原因一：组件内部使用组件，添加scoped属性；原因二：HTML是动态引入的，还添加了scoped属性；原因三：不是以上两个；1、增加scoped属性：Vue中scoped属性的作用主要是通过PostCss实现的。以下是翻译前的代码：.example{color:red;}转义后：.example[data-v-469af010]{color:red;}从这里我们可以看出，添加scoped属性的Components，为了不污染全局情况，做如下操作：添加一个非重复属性data-v-469af010给HTMLDOM节点以标记唯一性。在每个添加了scoped属性的组件的样式选择器之后，添加一个相当于“非重复属性”的字段，达到类似“scope”的作用，不影响全局。如果组件内部有组件，这里是重点---只在最外层组件的标签中添加一个唯一的属性字段------点结束，不影响组件内部引用的组件（笔记）。解决方案：样式渗透，从官方文档中了解到，我们所谓的渗透，官方名称是深度选择器。如何使用它？只要在我们要穿透的选择器前面加上>>>或/deep/或::v-deep即可。官方还说>>>可能有问题。推荐使用后两者，选择/deep/。实现原理：.wrap.example{color:red;}.wrap.example[data-v-469af010]{color:red;}渗透前添加渗透后:.wrap/deep/.example{color:red;}.wrap[data-v-469af010].example{color:red;}上面的对比就可以了可以看出，穿透只是改变了data-v-469af010标志的唯一位置，这样就可以生效。2.动态添加的html就不多说了。基本上和上面一样。动态添加的html没有经过翻译，没有对应的data属性，所以不会生效。3、程序员犯的不是上面两个常见的错误。是时候好好审视一下自己的代码了，看看自己有没有写过草率的代码。总结：如果以上分析为您解决了问题或烦恼，请点个赞~~