前端:css less语法 /deep/ 深度影响的用法
如果去掉scoped的话就会影响全局样式,但是加上scoped又不能在当前组件修改子组件的样式,这个时候就可以使用 /deep/ 了。这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免父组件对子组件的样式的影响。设置了上述scoped的话,如果想要在父组件中修改子组件的样式时应该怎么样做呢?来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式。css中通常会在
·
css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式。

这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免父组件对子组件的样式的影响。
添加后控制台显示的样式就会像这样:

设置了上述scoped的话,如果想要在父组件中修改子组件的样式时应该怎么样做呢?
如果去掉scoped的话就会影响全局样式,但是加上scoped又不能在当前组件修改子组件的样式,这个时候就可以使用 /deep/ 了。
/deep/ 表示深度选择器
用法:

注:
除了 /deep/ 以外,>>> 和 ::v-deep也可以实现同样的效果
注意:/deep/ 只能在像 less , sass 等css预处理器中使用,在原生css中使用无效,所以原生css当中应使用 >>> 。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)