深度选择器/deep/

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

#vue 

/deep/是vue2.x中实现样式穿透的方案，在vue3.x中使用:deep()替代/deep/
:deep(.title){
	color:pink
}
/deep/ 深度选择器的使用
m0_49373551的博客
11-20 660
使用场景： 我们使用/deep/ 深度选择器最主要的使用场景就是 要跨越 scoped 的限制 使用方式 <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App' } </script> <style lang="less" scoped > /d
/deep/深度选择器
Andrew_SJ的博客
08-12 523
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。 在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/。 我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件
[前端] vue2的/deep/转化为vue3语法（笔记）
梦醒贰零壹柒
05-15 696
但请注意，这可能会在未来的 Vue 版本中移除，所以最好尽量避免这种情况。样式，但这并不是长期推荐的实践。通常，你应该考虑使用。限制来修改第三方组件的样式，你可以使用。伪类作为非标准的解决方案来穿透。选择器已被废弃，因为它们与。然而，如果你确实需要在。在 Vue 3 中，
Vue2 、Vue3 》》样式 深度选择器 插槽选择器 样式（scoped、深度选择器、全局选择器）
Kaizen的博客
09-18 364
默认情况下，作用域样式不会影响到渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。:global 伪类选择器用于指定某些样式应该全局生效，而不是被限制在当前组件的样式作用域内。这对于需要覆盖库组件样式或者应用一些全局样式非常有用。因为子组件内部的元素会有。
vue2.x 深度选择器 ::v-deep
monian187的博客
04-29 1093
vue2.x 深度选择器 ::v-deep
css deep深度选择器 vue2/vue3使用
胖虎哇的博客
04-13 2060
css deep深度选择器
/deep/ ＞＞＞ ::v-deep的用法
weixin_49743062的博客
10-27 4822
而/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中的深度作用选择器/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 455
当style添加scoped时，表示组件私有化，可使组件模块化，其样式不会污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。 但这时需要引用公共组件时，无法改变公共组件样式，此时需要/deep/深度选择器，此时可以修改公共组件样式。 例如a-modal，如下： vue <div class="box"> <a-modal v-model="visibles" :title="title" class="
Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass，如果您的代码使用了 dart-sass 不支持的旧语法，可能存在部分不兼容的问题
每天都要努力学习哦~~
05-29 2986
SCSS 预处理器切换到dart-sass后，需要重点检查以下“旧语法”直接使用$a + $b等数学运算时，必须改为#{}插值或使用模块。大量依赖过时的@import语法可暂时保留，但建议逐步迁移到@use@forward模块化写法。若项目中频繁使用.sass缩进语法，需要确保缩进、空格、分号完全正确，以免 Dart Sass 报错。检查自定义函数、第三方库是否在 Dart Sass 中存在内置函数冲突或 API 差异，如有必要手动升级或改写。
在 Vue.js 中使用:deep() 、::v-deep()、::v-deep、 /deep/还是＞＞＞呢？
weixin_65908792的博客
02-29 2090
现在2024年了，关于Vue的深度选择器（“样式穿透”——不知道谁创造的词）的使用建议该更新了。vue2:建议使用::v-deep，vue3:建议使用:deep()。
vue 父组件修改子组件的样式——深度作用选择器 ＞＞＞ 、 /deep/ 、 ::v-deep、:deep()
朝阳39的博客
05-21 1642
通常使用深度作用选择器>>> 或 /deep/ 或::v-deep 可以实现样式穿透，达到父组件修改子组件的样式的目的。 /deep/ 和::v-deep 都是>>>的别名 Sass 、scss之类的预处理器无法正确解析>>>，需使用/deep/ 或::v-deep 只在第一层子组件的样式前加深度作用选择器 例如父组件中有如下子组件 <child class="markdown-body"/> 需修改子组...
vue2对应的element ui使用的＞＞＞ 和 /deep/ 在vue3中被 :deep() 代替
怡暘
06-01 2402
背景： 与同事合作开发过程中发现同事又学了新技能对组件样式进行强制修改，但是他用的时候控制台报错了，原因就是将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 539
框架进行迁移后出现了标题的警告，但是项目是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 1086
改变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 642
【代码】vue2样式穿透属性::v-deep。
css-深度选择器-vue2
qq_50853940的博客
04-23 1125
伪类可能仍然有效，但不建议使用，因为它不是一个官方推荐的解决方案，并且在将来的版本中可能会被彻底移除。伪类在 Vue 2.x 中是一个被废弃的特性，并且在 Vue 3.x 中已经移除。如果你正在使用 Vue 2.x，那么在某些情况下，：在 Vue 组件中，你可以使用。
Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass，如果您的代码使用了 dart-sass 不支持的旧语法，可能存在部分不兼容的问题。 16:54:20.938 解决方案： 16:54:20.938 方案1：调整为 dart-sass 支持的语法，将深度选择器 /deep/ 调整为 ::v-deep，详情：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-preprocessor 16:54:20.938 方案2：如果您希望继续使用node-sass，您可以在 manifest.json 中配置 "sassImplementationName": "node-sass"，详情：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-preprocessor 16:54:20.938 16:54:20.938 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): 16:54:20.938 SassError: expected selector. 16:54:20.938 ╷ 16:54:20.938 355 │ /deep/ .content_list .tag{ 16:54:20.938 │ ^ 16:54:20.938 ╵ 16:54:20.938 E:\app\pp_zihua\pages\tabbar\home.vue 355:1 root stylesheet
最新发布
12-10
在Vue Loader的文档中，对于深度选择器，在Vue2中推荐使用`::v-deep`（注意是双冒号）。 因此，根据上述信息，我们只需要进行替换即可解决问题。 </think> 针对 Vue2 中使用 dart-sass 时 `/deep/` 选择器报错的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值