VUE中的CSS样式穿透

什么是样式穿透?

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

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