覆盖element-ui、vant样式篇（一）

问题：两个页面同用一个scss样式文件（因为代码超级长）
第一个页面如图：

鼠标移出按钮，默认是会改变背景色的，我指的是取消按钮，然后我使用了

/deep/ :nth-child(1).el-botton:hover {
  background-color: #fff;
}

这个在第一个页面是可以满足需求的
第二个页面如图：

明显实现不了了，鼠标移入保存按钮，背景色变成了白色。
于是想到交集选择器（标签和类名构成）

/deep/ button.cancelBtn:hover {
 background-color: #fff;
}

这样既不影响其他页面，也可以实现需求！（没有样式影响的情况下，按钮背景色为白色的时候鼠标移入才改变背景色）

二、使用vant组件的时候，覆盖样式使用>>>,可以在当前组件下使用scoped

<style scoped>
  .a >>> .b { /* ... */ }
</style>

编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

三、最近新出了一种覆盖ui组件样式的方法：（注意：如果你使用了Less或Sass等预处理器，可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。

使用Less或Sass等预处理器的写法如下：）

.van-radio {
  /deep/ .van-radio__label {
    width: 500px;
  }
}
.van-radio {
  ::v-deep .van-radio__label {
    width: 500px;
  }
}

慢慢来，慢慢来，你看我还有机会吗？