深度选择器：解决Scoped样式穿透问题详解

所谓的穿透，官方叫做深度选择器。

当我们在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>