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