CSS样式穿透/深度选择器(＞＞＞&/deep/&::v-deep)

CSS样式穿透/深度选择器---kalrry

一、当前组件内修改第三方UI组件样式
二、当前组件内样式作用于子组件

一、当前组件内修改第三方UI组件样式

采用important

在外层套个div壳子用id增加权重

二、当前组件内样式作用于子组件

1，首先(>>>&/deep/&::v-deep)这三个是一个意思，推荐直接用::v-deep(小道消息说速度快)

2，如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
 .a >>> .b {
  /* ... */ 
  } 
 </style>
/* scoped 样式中上述代码将会编译成 */
.a[data-v-f3f3eg9] .b {
 /* … */ 
 }

有些像 Sass 之类的预处理器无法正确解析>>>。
这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的# CSS样式穿透/深度选择器(＞＞＞&/deep/&::v-deep)别名，同样可以正常工作。

<style scoped lang="scss">
  .a {
  	::v-deep .b {
			background: orange;
		}
  }
</style>

3. 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：
4. vue3.0的环境下，安装项目时选择了dart-sass，这个不支持/deep/和>>>的写法，只能用::v-deep，选择node-sass就不会有这个问题