css深度选择器/deep/ 在89版本后失效

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

#css

本文探讨了CSS在高版本中deep选择器的弃用问题，介绍了如何定位失效样式，以及less/sass在scope中的使用方法。官方建议避免全局使用/deep/，并提供了loader解析的解决方案。

问题：高版本样式异常

  • 正常版本
    在这里插入图片描述

  • 异常版本
    在这里插入图片描述

定位

通过查找节点信息，很快就发现了部分样式失效了。
在这里插入图片描述
在高版本这一份样式识别不了，去掉deep，就正常了

官方弃用

89版本遗弃deep

less/sass在scope可以继续使用/deep/吗？

可以的，loader会自动将scope下的deep的解析成全局样式，并添加对应的hash进行识别，所以可以正常使用。

全局样式不要使用/deep/

解决Vue Scss中/deep/无效问题
News777的博客
04-25 4573
问题 Syntax Error: SassError: expected selector. ╷ 850 │ /deep/ .el-table__body{ │ ^ 解决 在vue中，深度选择器>>>,/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep
UniApp 样式穿透：`:deep`、`/deep/` 和 `::v-deep` 不生效的原因与解决方案
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
05-13 1558
在 UniApp 中，当我们需要修改子组件或第三方组件的样式时，、 和 是非常常见的工具。但是，有时这些样式穿透机制却不如我们预期那样生效，这往往是因为不同的技术栈、环境配置或代码书写习惯导致的。今天我将从自己的开发经验出发，详细分析这些问题的成因，并提出一些解决方案。在我开发的过程中，发现很多人会在样式穿透时出现问题，往往是因为不同的 CSS 预处理器对穿透样式的支持情况不同，尤其是 Sass 系列的预处理器。 2. 微信小程序中样式不生效问题 在开发微信小程序时，曾遇到过样式穿透不生效的情况。深入了
前端：css less语法 /deep/ 深度影响的用法
classic0608的博客
05-15 7060
如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 /deep/ 了。这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。设置了上述scoped的话，如果想要在父组件中修改子组件的样式时应该怎么样做呢？来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。css中通常会在 style 标签内添加。除了 /deep/ 以外，也可以实现同样的效果。
chrome 89版本deep失效
Eric_web的博客
02-07 415
1、. 只用一级deep,嵌套的样式拿出来,如果怕覆盖样式放到某个样式下面去。
谷歌新版浏览器89版本less样式穿透（/deep/）失效
YQxyqX555的博客
03-09 2260
项目场景： 使用到antd,用/deep/修改antd原本的样式，今天测试人员更新了谷歌版本（89.0.4389.82）,样式失效，直接退回原来的样式 问题描述： 样式穿透写法如下（仅几例）： .antd-table /deep/ .ant-table-tbody > tr > td { border-bottom: 1px solid #065370; border-right: 1px solid #065370; color: #fff; } .antd-table /deep/ .an
css深度选择器 /deep/ 在89版本后就失效了
轻风细雨_林木木
03-05 686
在高版本中（89版本以后）css使用/deep/样式就失效了。
css预处理文件使用scss嵌套写法深度选择器deep失效问题
m0_48521482的博客
03-29 3325
vue3 + vite + elementPlus项目，css预处理文件使用scss嵌套写法导致深度选择器deep失效
vue3 css deep 的各种写法 :(deep) 与/deep/ 与深度选择器>>>
08-10
1. 在Vue 3中，官方推荐使用`::v-deep`（在Vue 3.1+中，为了与伪元素保持一致，推荐使用`:deep()`）作为深度选择器。 2. 引用[1]指出：在Vue 3.x中，推荐使用`::v-deep`作为深度选择器，因为它既清晰又符合Vue的官方...
css关于/deep/和＞＞＞和::v-deep的解释和用法
热门推荐
走在搬砖的路上！
07-06 2万+
/deep/和>>>和::v-deep 我们在style lang="scss"时经常用scoped属性实现组件样式私有化的时候，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，比如: .conBox /deep/ .el-input__inner{ padding:0 10px; } 注意，VUE3.0下/deep/的使用可能会有报错 如果/deep/报错，可采用::v-deep，效果基本一样，有人说
Vue scoped SCSS修复：使用/deep/解决样式失效问题
因此，尽量避免过度依赖这种技术，或者考虑使用其他替代方案，如使用深度选择器（`:deep()`）或使用组件级CSS模块（CSS Modules）。 4. **自定义类名**：在父组件中，通过给子组件添加自定义类名，然后在子组件中...
【css】修改第三方组件样式不生效（深度选择器 ＞＞＞ /deep/ ::v-deep）
m0_61049675的博客
01-22 1050
【代码】【无标题】
chrome89不再支持嵌套/deep/
qq_37730779的博客
04-06 487
chrome89更新到89以后发现页面上有些样式不起作用 搜了下chromestatus Feature: Shadow-Piercing descendant combinator, ‘/deep/’ (removed) The /deep/ combin 翻译后意思就是嵌套的/deep/将不会生效
Nodejs 10以上版本不支持Deepin 问题
chisuiwu1167的博客
06-19 399
I solved this problem by this way : Copy script fromhttps://deb.nodesource.com/setup_12.x. Find line DISTRO=$(lsb_release -c -s) and change ...
Vue中 scss不支持/deep/写法问题
Gomeer的博客
08-06 7484
在style有scoped属性时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如 .conBox /deep/ .el-input__inner{ padding:0 10px; } 如果/deep/报错，可采用::v-deep .conBox ::v-deep .el-input__inner{ padding:0 10px; } ...
＞＞＞和/deep/和::v-deep
weixin_43847807的博客
11-22 424
>>> 没有用预编译如sass、less可以使用 /deep/ vue低版本使用（高版本不兼容会报错） ::v-deep vue都能使用
为什么 /deep/ 现在不推荐使用？
最新发布
liyuxiaomeng的博客
08-15 568
deep/是早期 Vue 项目中配合scoped样式使用的深度选择器，用于穿透组件的样式隔离（修改子组件或第三方组件的样式）。但它并非官方标准语法，而是某些预处理器（如 Less、Sass）和构建工具（如旧版 Webpack）的 “非标准实现”，在不同环境中可能存在解析问题。在 Vue 3 中，官方明确推荐使用::v-deep替代/deep/，因为::v-deep是 Vue 框架定义的标准化深度选择器语法，兼容性更好，且在单文件组件（SFC）中更符合规范。随着 CSS 原生:deep()
89版本的chrome不支持less deep样式穿透
易函123
03-29 995
问题 chrome版本号89.0.4389.90，不支持less的/deep/样式穿透 解决 既要照顾以前的版本，又要兼容新版本，建议写两种css样式 .main{ .el-dialog__headerbtn{ top:-5px!important; right:0px!important; } /deep/.el-dialog__headerbtn{ top:-5px!important; right:0px!important; } }
/deep/在chrome89+中出现样式混乱的问题
小方块的世界
03-12 1414
问题描述 elementui-admin项目中使用/deep/在chrome89+中出现样式混乱的问题 公共样式文件中，使用/deep/，在main.js中引用，chrome89版本以下生效。chrome89+ /deep/选择器失效，导致样式错乱，覆盖的样式失效。 问题分析 Chrome 63将删除::shadow 和 /deep/ 在Chrome63之后，你将无法使用shadow-piercing 选择器， ::shadow 和 /deep/ 来设计(style) shadow root里面的内容。
/deep/ 在谷歌浏览器89+版本失效问题解决
暮霭的博客
03-25 2078
可直接将原有的/deep/直接删除，但为避免低版本删除后样式改变可令写一次无/deep/的样式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值