/deep/应用场景:
(1)引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面。但有时又需要调整组件的样式，在含有scoped的style里里面在写样式对子组件是不生效的。(以前都是再加一个不含scoped的style标签，通过外层组件添加唯一class来区分组件，修改各种第三方组件的样式。 )
(2)在父组件中的样式无法修改子组件的样式这时可以使用深度作用选择器 /deep/;
上图是修改ant-design里面.ant-input的样式，经测试，/deep/直接放到.ant-input前面和放在自定义class前面都可以达到想要的效果。
网上还看到了说/deep/有些浏览器有兼容问题，/deep/替换为>>>就可以解决问题，试了一下，报错。（更新一下，最近补全了一下深度选择器的知识，报错是因为使用了css预加载器）
>>>
深度作用选择器的简写形式
- 只作用于css，不支持css预加载器（less/scss）
- 是
/deep/的简写形式,适用于Vue2.x版本，Vue3.x版本使用会报错
/deep/
Vue2.x的深度作用选择器正式写法
- 仅适用于Vue2.x版本
- 支持css预加载器
::v-deep
Vue3.x的深度作用选择器正式写法
总结
Vue2.x版本使用优先级 /deep/ > >>>
Vue3版本使用::v-deep
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
