深度选择器/deep/

最新推荐文章于 2025-09-02 17:46:04 发布
原创 最新推荐文章于 2025-09-02 17:46:04 发布 · 843 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue 

/deep/是vue2.x中实现样式穿透的方案，在vue3.x中使用:deep()替代/deep/
:deep(.title){
	color:pink
}
深度选择器/deep/、::v-deep、:deep的区别
qq_53911056的博客
03-29 4722
深度选择器/deep/、::v-deep、:deep，三个选择器都是用于穿透组件作用域并样式化子组件内部元素的。在 Vue.js 2中，可能更倾向于使用 /deep/；而在 Vue.js 3中，应该使用 ::v-deep 或其别名 :deep......
/deep/深度选择器
Andrew_SJ的博客
08-12 517
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。 在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/。 我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件
/deep/深度作用选择器作用及使用
热门推荐
weixin_45842655的博客
12-15 2万+
初始/deep/时百度搜索看了好多人的文章,有些内容不全有些理解错误(仅个人观点) 自己记录下 1.在了解/deep/之前需先了解scoped属性作用 看博文https://blog.csdn.net/weixin_45842655/article/details/103490900或者点我跳转 2.看官方文档 比较全面 https://vue-loader.vuejs.org/zh/guide/...
Vue.js 中深度选择器的区别与应用指南
m0_64344997的博客
09-02 1029
Vue深度选择器对比指南 Vue中深度选择器用于穿透scoped样式限制，不同版本支持不同语法： 1️⃣ >>> (Vue2早期，已废弃) 2️⃣ /deep/ (Vue2，已废弃) 3️⃣ ::v-deep (Vue2.6+) 4️⃣ ::v-deep() (Vue3推荐) 5️⃣ :deep() (Vue3.2+最新语法) 最佳实践： ✔️ Vue3项目使用:deep() ✔️ 添加父级类名限定作用域 ✔️ 避免全局样式穿透影响性能 适用于修改第三方组件样式、子组件特定元素等场景，注意
css样式 中 /deep/ 的含义 以及用法
weixin_48986139的博客
04-08 1万+
首先 /deep/ 深度选择的意思 一、先来聊聊scope 这个大家应该都不陌生，使用场景为在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。 父组件 <template> <div> <h1 class="title">{{ name }}</h1> <
[前端] vue2的/deep/转化为vue3语法（笔记）
梦醒贰零壹柒
05-15 687
但请注意，这可能会在未来的 Vue 版本中移除，所以最好尽量避免这种情况。样式，但这并不是长期推荐的实践。通常，你应该考虑使用。限制来修改第三方组件的样式，你可以使用。伪类作为非标准的解决方案来穿透。选择器已被废弃，因为它们与。然而，如果你确实需要在。在 Vue 3 中，
vue2.x 深度选择器 ::v-deep
monian187的博客
04-29 1037
vue2.x 深度选择器 ::v-deep
Vue中的深度作用选择器/deep/
01-07
当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。 有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。 用法如下： /deep/
深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞
千里之行，始于足下！
01-26 1万+
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。 去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）,最好使用深度选择器。本文对深度选择器做一个总结记录 1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式 <style lang="css" s.
/deep/ 深度选择器
Bruce_byan的博客
07-05 450
当style添加scoped时，表示组件私有化，可使组件模块化，其样式不会污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。 但这时需要引用公共组件时，无法改变公共组件样式，此时需要/deep/深度选择器，此时可以修改公共组件样式。 例如a-modal，如下： vue <div class="box"> <a-modal v-model="visibles" :title="title" class="
css deep深度选择器 vue2/vue3使用
胖虎哇的博客
04-13 2055
css deep深度选择器
/deep/ ＞＞＞ ::v-deep的用法
weixin_49743062的博客
10-27 4799
而/deep/ 和 ::v-deep的区别是 vue2中使用::v-deep vue3中使用/deep/样式如果是sass/less 用>>>选择器无效 要选择/deep/ 或者 ::v-deep。//举例1：vue2中去除element-table中表格使用固定列下方出现的一条线。//举例2：vue2中el-dialog里面的form-item改变间距。//举例3 直接不使用::v-deep /deep/ >>>/deep/ >>> ::v-deep三个都是。实现组件样式私有化，导致。
在 Vue.js 中使用:deep() 、::v-deep()、::v-deep、 /deep/还是＞＞＞呢？
weixin_65908792的博客
02-29 2068
现在2024年了，关于Vue的深度选择器（“样式穿透”——不知道谁创造的词）的使用建议该更新了。vue2:建议使用::v-deep，vue3:建议使用:deep()。
vue 父组件修改子组件的样式——深度作用选择器 ＞＞＞ 、 /deep/ 、 ::v-deep、:deep()
朝阳39的博客
05-21 1609
通常使用深度作用选择器>>> 或 /deep/ 或::v-deep 可以实现样式穿透，达到父组件修改子组件的样式的目的。 /deep/ 和::v-deep 都是>>>的别名 Sass 、scss之类的预处理器无法正确解析>>>，需使用/deep/ 或::v-deep 只在第一层子组件的样式前加深度作用选择器 例如父组件中有如下子组件 <child class="markdown-body"/> 需修改子组...
vue2对应的element ui使用的＞＞＞ 和 /deep/ 在vue3中被 :deep() 代替
怡暘
06-01 2394
背景： 与同事合作开发过程中发现同事又学了新技能对组件样式进行强制修改，但是他用的时候控制台报错了，原因就是将vue2上兼容的使用方式用在了vue3中。下面我们一起来看看吧 一、系统控制台警告信息： [@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead. 二、vue2和vue3中的使用情况概述： 在Vue2中 经常使用 >>> 或 /deep/ 样式穿透 修
vue2升级后出现编译警告和错误！提示用deep()替代/deep/！vue packages version mismatch
liujiebahuang的博客
09-19 535
框架进行迁移后出现了标题的警告，但是项目是2版本并没有升级到3，本来只是警告并不影响使用，后来看着碍眼就整它，一系列操作后直接编译错误出现version mismatch错误，再也不能凑活。不能瞎机霸整啊，之前为了解决node溢出问题清除了缓存导致了以上问题，通过上面的办法解决后导致项目里出现了各种bug。把vue-template-compiler版本更改至和vue一样的版本。还原最初的配置后继续尝试安装一下插件解决node溢出问题。
/deep/和::v-deep和＞＞＞
weixin_47799321的博客
01-27 1万+
1. /deep/ 项目中使用预处理器，如sass less等 都可以用 /deep/ 我们在style lang="scss"时经常用scoped属性实现组件样式私有化的时候，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，比如: .conBox /deep/ .el-input__inner{ padding:0 10px; } 2. ::v-deep或::v-deep() 用于既有预处理器，还是vue项目用到Elemen
/deep/ 、＜＜＜ 、::deep
weixin_55782474的博客
04-15 1083
改变element-ui某个深层元素或其他深层样式方法 一、方法一： 1、/deep/ 在vue.3.0会报错，可用 ::deep 2、>>> ：深度作用选择器。只作用于css 如果是sass/less的话可能无法识别，这时候使用 /deep/和::v-deep 选择器 二、方法二 移除scoped，新建一个没有scoped的style。一个vue文件允许多个style ...
vue2样式穿透属性::v-deep
u014642921的博客
06-17 627
【代码】vue2样式穿透属性::v-deep。
D:\yanli\软件测试\mpweixinA093校园二手书籍交易微信小程序1\code\front\pages\shujixinxi\detail.vue 486:8 root stylesheet 10:18:52.508 10:18:52.508 Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass，如果您的代码使用了 dart-sass 不支持的旧语法，可能存在部分不兼容的问题。 10:18:52.508 解决方案： 10:18:52.508 方案1：调整为 dart-sass 支持的语法，将深度选择器 /deep/ 调整为 ::v-deep，详情：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-preprocessor 10:18:52.508 方案2：如果您希望继续使用node-sass，您可以在 manifest.json 中配置 "sassImplementationName": "node-sass"，详情：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-preprocessor 10:18:52.508 10:18:52.508 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): 10:18:52.509 SassError: expected selector. 10:18:52.509 ╷ 10:18:52.509 525 │ .audio /deep/ .uni-audio-default{ 10:18:52.509 │ ^ 10:18:52.509 ╵
最新发布
10-14
需要将`/deep/`替换为Vue支持的深度选择器写法。 根据引用[2]：dart-sass不支持/deep/，要改成::v-deep。 因此，解决方案是将代码中的`/deep/`替换为`::v-deep`。 但是，注意在Vue中，我们通常使用`>>>`、`/deep...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值