css /deep/、 v-deep、:deep这三个效果一样的用法

基本意思就是，一个组件会被多个地方使用，但是有些地方可能需要的样式不太一样，比如一个地方需要红色背景，而另外一个地方可能需要蓝色背景，假设第一个地方已经是红色背景了，我想在第二个地方用时改成蓝色，这是如果直接通过全局修改样式则会影响到第一个的背景样式，但是我的本意并不是修改第一个地方的，而是只修改第二个地方的，这个时候就可以在第二个用到样式的前边添加上一个/deep/ 第一个的跟样式{} 在对象中修改颜色即可，比如

详细可参考此链接：掘金

scss 中使用方法：可以使用v-deep

 ~~~javascript

::v-deep .el-drawer__wrapper{
    top: 176px;
}

~~~

vue 中可以这样使用：

~~~html

<style lang="less" scoped>
.jjw{
  :deep .van-button--primary{
    background-color: deeppink;
  }
  /deep/ .van-button--normal{
    font-size: 24px;
  }
}
</style>

~~~

效果是一样的 

需要注意的是同一个项目不同的.vue之间(写有scoped隔离的)也是可以使用deep的