背景
在之前的项目中，使用element-ul组件库对结构和样式进行搭建，需要用到样式穿透，特来分享
样式穿透是什么
我们说所的穿透，官方叫做深度选择器。就是在我们想穿透的选择器前边添加>>>或者 /deep/ 或者 ::v-deep
为什么要样式穿透呢
我们在写组件样式时通常如下代码：
<style scoped lang="scss">
.img-container {
.img{
border-radius: 50%;
width: 100px;
height: 100px;
}
}
</style>
形成样式不起效的原因：
因为关键字scoped的原因,style标签内的样式只会对当前组件内容生效,也就是他只会对带有data-v-...属性的html元素生效。
但是如果这个img样式,是在某个第三方组件当中使用时,这个组件的class就是img，但他没有带有data-v-....，这时候我们这么写样式是无法生效的,会造成组件之间的样式覆盖所以就需要用到样式穿透。
编译器会将data-v-...放到了上一个标签选择器上面,
由此img样式只会对.img-container[data-v-...]下的HTML元素生效,
即完成了对class为img的HTML元素设置样式,又保证了不影响范围之外的img元素。
样式穿透， 有三种写法：
1、>>>
如果vue的style使用的是css，那么则
<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>
复制代码
但是像 less ，scss等预处理器却无法解析>>>，所以我们使用下面的方式.
2、/deep/
<style lang="less" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
在vue-cli3编译时，deep的方式会报错或者警告。
此时我们可以使用第三种方式
3、::v-deep
切记必须是双冒号
<style lang="scss" scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
