博客

css深度作用选择器的作用

如果使用了scoped后,无法修改第三方UI组件库组件的样式，

这里可以使用css深度作用选择器，以作样式修改。

例：vue项目中，经常需要使用如elementUI等组件库，有些样式直接在组件中修改无效，因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。针对这种情况，可以使用深度作用选择器（即样式穿透）。

具体用法

1、如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改

<style scoped>
	/*编译前*/
	#test >>> .el-checkbox__label{ color: red; }
	
	/*编译后*/
	#test[data-v-f3f3eg9] .el-checkbox__label {color:red; }
</style>

2、项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/


注意：vue-cli3以上版本不可以


<style lang="scss" scoped>
/*用法1*/
.a {
 /deep/ .b {  color:red; }
} 
/*用法2*/
.a /deep/ .b { color:red; }
</style>

3、如果使用了预处理器都可以使用 ::v-deep

<style lang="scss" scoped>
/*用法1*/
.a{
 ::v-deep .b { color:red; }
} 
/*用法2*/
.a ::v-deep .b { color:red;}
</style>

参考链接：https://www.cnblogs.com/linjiangxian/p/13183412.html