vue样式穿透＞＞＞

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

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

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

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

<style scoped>
>>> .ivu-table-header th{
    background-color: #ddd;
}

我没写这个符号前，怎么设置都不见效果。估计要设置这个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}

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