样式穿透 ＞＞＞、/deep/ 、::v-deep 、:deep(＜inner-selector＞)应用场景

1. >>>

用于原生 CSS 样式穿透

#box >>> .header {
	width: 100%;
	height: 200px;
}
1
2
3
4

2. /deep/

如果项目使用了预处理器 scss 、less 等 css 预处理器，则可以使用 /deep/
注意：vue-cli3以上版本不可以

#box /deep/ .header {
	width: 100%;
	height: 200px;
}
1
2
3
4

3. ::v-deep

不适用于 vue3 scss 场景 其他场景通用

#box ::v-deep .header {
	width: 100%;
	height: 200px;
}
1
2
3
4

4. :deep()

vue3 项目，使用 scss 预处理器，推荐使用 :deep() 语法，否则会报如下警告

::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞) instead

#box :deep(.header) {
	width: 100%;
	height: 200px;
}
1
2
3
4