所谓的穿透，官方叫做深度选择器。
当我们在view组件组件中写的样式,在检查网页时发现没有生效,原因是<style scoped></style>
中的scoped所致,当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素,此时就需要用到样式穿透
如何使用深度选择器?在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。>>>可能存在问题，建议用后两者
如下案例:
<style lang="scss" scoped>
.sideBar {
background-color: #5687fe !important;
background-image: url(~@/assets/common/leftnavBg.png);
background-repeat: no-repeat;
background-position-y: 100%;
.el-menu {
border: none;
height: 100%;
width: 100% !important;
::v-deep a {
&.router-link-exact-active,
&:hover {
.svg-icon {
color: #43a7fe;
}
span {
color: #43a7fe;
}
background-color: #fff;
}
li {
.svg-icon {
color: #fff;
font-size: 18px;
vertical-align: middle;
.icon {
color: #fff;
}
}
span {
color: #fff;
}
}
}
}
}
</style>
'
