scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题

开发中经常会用到深度选择器来修改第三方组件库等子组件的样式,这时候就用到样式穿透(style Penetration)

样式穿透的方式有:>>>、 /deep/、::v-deep这三种

使用中发现了一个问题,就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时,会影响到子组件中的样式,

第一种方式:

使用>>>修改无效,原因是scss等预处理器却无法解析>>>

第二种:

而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。

第三种,使用::v-deep,

使用方式:要修改的元素外层套一层box,修改样式时加在选择器前,这样就可以将要修改的的元素限制在当前文件,如下,需要修改class为v-tabs__nav的元素时:

javascript 复制代码
 .tabs-wrap ::v-deep.v-tabs__nav{
   background-color: transparent !important;
 }
相关推荐
李松桃5 分钟前
01HTML-CSS-入门知识点
前端·css
广州华水科技5 分钟前
北斗GNSS变形监测系统是什么?主要有哪几种应用?
前端
晴天1610 分钟前
【跨桌面应用开发】Neutralinojs快速入门指南
前端·javascript·electron·node.js
爱学习的程序媛1 小时前
【Web前端】深入解析JavaScript异步编程
开发语言·前端·javascript·ecmascript·web
梧桐1681 小时前
马克沁机枪上阵(二):前线开辟—Claude Code 如何用一天打通前端
前端
是上好佳佳佳呀1 小时前
【前端(一)】HTML 知识梳理:从结构到常用标签
前端·html
楚轩努力变强1 小时前
2026 年前端进阶:端侧大模型 + WebGPU,从零打造高性能 AI 原生前端应用
前端·typescript·大模型·react·webgpu·ai原生·高性能前端
放下华子我只抽RuiKe51 小时前
深度学习 - 01 - NLP自然语言处理基础
前端·人工智能·深度学习·神经网络·自然语言处理·矩阵·easyui
酉鬼女又兒1 小时前
零基础入门前端 第十三届蓝桥杯省赛 :水果拼盘 Flex一篇过(可用于备赛蓝桥杯Web应用开发)
前端·css·职场和发展·蓝桥杯·css3