（css样式穿透详解）::v-deep的使用

红太狼 2023-10-14 23:44 61阅读 0赞

**目录**

背景

使用：

1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式

2、当项目中使用的 css 扩展语言是 less， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式

3、当项目中使用的 css 扩展语言是 node-sass， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式

4、当项目中使用的 css 扩展语言是 dart-sass， 需要使用 ::v-deep 深度选择器来修改 外用第三方组件的样式，dart-sass不支持 /deep/ 和 >>> 的写法

注意：

--------------------

## 背景 ##

> 在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）

[::v-deep的使用\_前端\_前端烂笔头-华为云开发者联盟][v-deep_-]

## 使用： ##

### **1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式** ###

### **2、当项目中使用的 css 扩展语言是 less， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式** ###

### **3、当项目中使用的 css 扩展语言是 node-sass， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式** ###

### **4、当项目中使用的 css 扩展语言是 dart-sass， 需要使用 ::v-deep 深度选择器来修改 外用第三方组件的样式，dart-sass不支持 /deep/ 和 >>> 的写法** ###

## **注意：** ##

> ① 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/  
> ② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep  
> ③ 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用

[v-deep_-]: https://huaweicloud.csdn.net/638ee1b9dacf622b8df8d7ae.html?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~activity-5-123874197-blog-127942860.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~activity-5-123874197-blog-127942860.235%5Ev38%5Epc_relevant_anti_t3&utm_relevant_index=10