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

原因1:组件内部使用组件,添加了scoped属性

原因2:动态引入html,也添加了scoped属性;

原因3:非以上两种;

一、添加了scoped属性:

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




转义后:

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


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

  1. 给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性。
  2. 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段,实现类似于“作用域”的作用,不影响全局。
  3. 如果组件内部还有组件,这里是重点------*只会给最外层的组件里的标签加上唯一属性字段 *------重点结束,不影响组件内部引用的组件( 注意 )。

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

怎么用的呢 ?就是在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。
官方还说>>>可能存在问题Vue 2.x无效,建议用后两者,就选择 /deep/ 。

实现原理:
没加穿透前



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

加了穿透后:



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

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

二、动态加入的html

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

三、非以上两种

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

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

https://blog.csdn.net/weixin_44041976/article/details/106638498

你可能感兴趣的:(解决vue中样式不起作用:样式穿透/深度选择器(/deep/))