Vue中 scss /deep/ 修改样式

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

#vue.js

本文介绍如何在Element UI中使用/deep/或::v-deep正确地为有scoped属性的深层元素如.el-input__inner设置样式，包括解决/deep/报错的方法。

在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;
}
Vue3 关于scss预编译中:deep 其中的deep如何理解
专注基础架构领域
07-12 2873
在SCSS预处理器中，:deep是一个伪类器，用于一个元素的所有后代元素，无论它们在DOM结构中的层级深度如何。换句话说，:deep器是一个类似于CSS中的后代器，但是它可以不考虑嵌套层级的限制，而是选择所有符合条件的后代元素。例如，使用以下可以选择所有.container元素下的所有span需要注意的是，:deep选择器已经被标记为弃用的选择器，建议使用/deep/或者::v-deep代替。相关问题。
解决Vue Scss中/deep/无效问题
News777的博客
04-25 4568
问题 Syntax Error: SassError: expected selector. ╷ 850 │ /deep/ .el-table__body{ │ ^ 解决 在vue中，深度选择器>>>,/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep
Vue 深度选择器（:deep）完全指北：从“能用”到“用好”
最新发布
weixin_48221903的博客
09-21 1069
你在 <style scoped> 里写过 .a >>> .b、 /deep/ .b 或者 ::v-deep .b ？
vue3学习笔记之样式穿透(:deep)及CSS 新特性(:soltted、:gloabl、v-bind、mouldCSS)
小多的博客
01-17 9732
的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式。标签会被编译为 CSS Modules 并且将生成的 CSS 类作为。渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。通过在DOM结构以及css样式上加唯一不重复的标记。：全局选择器，定义全局样式，不用单开一个没有。默认情况下，作用域样式不会影响到。常用场景：一般用于TSX和渲染函数。：改变css解析时私有属性的位置。自定义注入名称（多个可以用数组）：在子组件定义样式插槽内容样式。常见作用场景：修改组件库样式。
scss深度选择器修改第三方样式（::v-deep）
qq_38969618的博客
06-15 3454
.my-custom-form ::v-deep .el-select__tags{ top: 72%; } .my-custom-form ::v-deep .el-input__suffix{ top: 20%; }
利用深度/deep/深度修改组建的样式
jokren的博客
01-10 7983
利用深度/deep/深度修改组建的样式 1. :host /deep/ .classname{ } 2.#idName /deep/ .classname{ }
使用deep修改前端框架中的样式
m0_72167535的博客
07-02 1627
使用deep修改前端框架中的样式
VUE_vue使用/deep/报错并且无法启动项目完美解决，/deep/编辑器标红解决
小歪博客
09-04 1万+
/deep/深度选择器在使用的时候会出现编辑器报错，标红的报错，但是样式任然会起作用！ 解决办法： 只需要在/deep/前面加一层标签就不会报错了 因为一般外层都是div标签，我这里就直接加的div标签 完美解决！ 注意： style标签加上 scoped <style scoped> ...
解决vue scoped scss 无效的问题
11-19
总的来说，修改`scoped`中的`scss`样式主要依赖于`/deep/`或`>>>`来穿透作用域限制。然而，最佳实践是尽量避免直接修改第三方组件的样式，除非组件本身不提供足够的自定义选项。如果组件库提供了主题定制或者CSS变量...
vue scss中使用/deep/报错
08-26
在 Vue 中使用 `/deep/` 或 `::v-deep` 可以解除样式作用域限制，允许您在子组件中修改父组件的样式。但是需要注意的是，`/deep/` 在 Vue 2.x 中已被废弃，取而代之的是 `>>>` 或 `::v-deep`。 如果您在使用 `/deep...
Vue scoped SCSS修复：使用/deep/解决样式失效问题
"本文主要介绍了如何解决Vue中使用`scoped`属性时，内部的SCSS样式无效的问题，并提供了具体的解决方案，以及对Vue组件样式修改、`/deep/`选择器的使用进行了详细解释。" 在Vue.js开发中，`scoped`属性通常用于限制...
vue样式穿透（::v-deep，/deep/的使用）
qq_37493515的博客
06-10 6467
vue样式穿透（::v-deep，/deep/的使用）
深度选择器——vue或react中修改组件样式的方法
杜永康的博客
06-14 6301
6.权重问题，因为这种选择器的使用，具有穿透性，即使是引入的组件，通过f12找到元素类名，可以通过这样的方式修改其样式，但要注意，这边修改一个样式，其他地方有的样式也可能会变，这就一定要选择。⭐⭐使用 className 和全局 CSS 样式表：在组件模板中使用 className 属性来设置类名，然后在全局 CSS 样式表中定义对应的样式。⭐⭐使用 class 属性和全局 CSS 样式表：在组件模板中使用 class 属性来设置类名，然后在全局 CSS 样式表中定义对应的样式。
vue 深度改样式
weixin_41876163的博客
10-28 1433
“/deep/” “>>>” “::deep” “:v-deep”
vue---深度修改样式
zH1_234567的博客
11-10 1074
scss .parent { &::v-deep { .children1 { 样式 } .children2 { 样式 } ....... } }
Vue 使用Scss，深度修改局部样式
weixin_45108907的博客
08-24 4545
使用scoped后，局部样式，不会影响到全局样式 如果想在使用了scoped不污染全局样式的情况下，修改局部组件的样式，可以使用深度选择器 less中一般使用 >>> 或 /deep/ scss中一般使用 ::v-deep ...
vue项目中，scss 使用 /deep/ 穿透写法
热门推荐
qq_36437172的博客
08-20 5万+
当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它通过使用 PostCSS 来实现以下转换： <template> <div class="example" data-v-f3f3eg9>hi</div> </template> <style> .example[data-v-f3f3eg9] { color: red; } </...
scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题
kirinlau的专栏
10-30 3696
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。使用中发现了一个问题，就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时，会影响到子组件中的样式，样式穿透的方式有：>>>、 /deep/、::v-deep这三种。使用>>>修改无效，原因是scss等预处理器却无法解析>>>第三种，使用::v-deep，
vue的css深度选择器 deep /deep/
m0_75269526的博客
05-08 2710
/deep/ ::v-deep :deep vue深度选择器，elementui调整样式不起效果当我们遇到需要在一个组件中想要影响到子组件，就可以使用深度选择器，而::v-deep 在vue3中已经启用了 /deep/ 和>>>有存预处理器不支持和浏览器兼容为题，综上所述，使用:deep()是最佳的解决方案。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值