关于scss 里面的深度选择器 ::v-deep与 /deep/ 的区别，望大神详解

風灬雲 2019-12-03 06:33:36

::v-deep与 /deep/都是深度选择器，都能实现对组件内部的样式修改；但是具体有什么区别，公司同事主张使用 ::v-deep，说是能加快编译速度，但是我在网上没有找到相关资料

...全文

3442 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

普通的星星. 2022-05-16

打赏
举报

回复

我从网上看到的：在scss中不识别/deep/, 可以使用::v-deep

本文详细解析了Vue.js中深度选择器的演进与使用。从早期被废弃的/deep/和>>>，到Vue3推荐的::v-deep和:v-deep()，深度选择器解决了Scoped CSS中子组件样式修改的难题。文章对比了各种选择器的兼容性、语法特性和性能表现，并提供了修改第三方组件、自定义组件样式等实际应用场景。最佳实践建议Vue3项目统一使用::v-deep或:v-deep()，避免全局样式污染，同时给出了迁移指南和常见问题解决方案。深度选择器是组件化开发中样式穿透的重要工具，合理使用能提升开发

scss中使用/deep/深度选择器报错的解决办法

在写一些vue项目时候，经常会引入一些组件。无论是自定义组件还是引入的外部组件。style经常用scoped属性实现组件的私有化，防止影响到其他页面上的样式。但是有时需要在父组件中更改自组件的样式，比如要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，就要用到组件穿透（也叫深度修改css，深度作用选择器）可用的方法有 >>> 、 /deep/ 、 ::v-deep 有些像 Sass 之类的预处理器无法正确解析 >>&g...

css深度作用选择器的作用：如果使用了scoped后,无法修改第三方UI组件库组件的样式，这里可以使用css深度作用选择器，以作样式修改。例：vue项目中，经常需要使用如elementUI等组件库，有些样式直接在组件中修改无效，因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。针对这种情况，可以使用深度作用选择器（即样式穿透）。具体用法 1、如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改 <style scoped>

::v-deep和/deep/区别

61,119

社区成员

60,701

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章