使用深度选择器实现样式穿透

如果父组件的样式（scoped）且还想影响到子组件的样式

像这种情况我们可以选择使用深度选择器，它可以实现样式穿透，看下图：

 当我们不加scoped时发现是可以实现子组件继承父组件样式，我们知道，scoped的作用就是为了使样式仅在当前组件所使用，为了防止样式混乱。而加了scoped后我们发现，父组件身上多了一个自定义属性，为data-v-xxx，同时我们由下图发现子组件的样式并没有变回红色，而我们需要在父组件身上改变子组件的样式

我们需要使用样式穿透（深度选择器），它有三种书写方式，分别针对

原生css：        >>>

less:                 /deep/

scss:                ::v-deep

 

 我们可以使用更深层次的结构来测试一下

接下来我们使用ElementUI中的走马灯，改变下方的索引，将其更改为圆点的样式

 

  >>> .el-carousel__button{
    width: 10px;
    height:10px;
    background: red;
    border-radius: 50%
  }