vue样式穿透＞＞＞

穿透当前组件的样式范围，去设置父组件样式

今日忽然留意到VUE组件中，样式代码有个古怪的符号，三个大于号。

事实上，这个符号，是VUE的专用符号，用于CSS。目的是穿透当前组件，去设置父组件的样式。因为一般来说，组件的样式都有<style scoped>，将样式限定于当前组件。

比如，我想改iview里table组件的表头样式，就这样写：

<style scoped>
>>> .ivu-table-header th{
    background-color: #ddd;
}
</style>
1
2
3
4
5

我没写这个符号前，怎么设置都不见效果。估计要设置这个table组件的默认样式，只能到上级去设置。话说，iview的table组件，居然没有提供方法设置表头，真不知道是怎么想的。

＞＞＞用在原生的css。如果用的是sass,scss,less，可以使用 ::v-deep。本来/deep/等同于::v-deep，但vue-cli3可能不支持。

<style scoped>
/*编译前*/
.a >>> .b { 
 color:blue
}
.a{
 ::v-deep .b { 
  color:blue
 }
} 
.a ::v-deep .b {
 color:blue
}

/*编译后*/
.a[data-v-fsdfg9] .b { color:blue}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

参考资料：
vue组件样式穿透/deep/ ::v-deep ＞＞＞区别