css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式。
这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免父组件对子组件的样式的影响。
添加后控制台显示的样式就会像这样:
文章来源地址https://www.toymoban.com/news/detail-653508.html
设置了上述scoped的话,如果想要在父组件中修改子组件的样式时应该怎么样做呢?
如果去掉scoped的话就会影响全局样式,但是加上scoped又不能在当前组件修改子组件的样式,这个时候就可以使用 /deep/ 了。
/deep/ 表示深度选择器
用法:
注:
除了 /deep/ 以外,>>> 和 ::v-deep也可以实现同样的效果
注意:/deep/ 只能在像 less , sass 等css预处理器中使用,在原生css中使用无效,所以原生css当中应使用 >>> 。文章来源:https://www.toymoban.com/news/detail-653508.html
到了这里,关于前端:css less语法 /deep/ 深度影响的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!