Depth selector

Project development process , Component libraries are often used by third parties , In order to quickly build functional modules .

for example ; Use Element UI Walking lantern ( Shuffling figure ) Components

<el-carousel height="150px">
     <el-carousel-item v-for="item in 4" :key="item">
         <h3 class="small">{
   { item }}</h3>
    </el-carousel-item>
</el-carousel>

At this time, I want to change the style or offset position of the left and right arrow indicators

View the built-in style code

  Whether it's direct use button tag chooser Or is it Class name You can't change the style

This is because in the style Used in less(scss) and scoped

It's needed at this time Depth selector 了

for example , modify button Size and location , Use ::v-deep

::v-deep .el-carousel__arrow--left {
  width: 50px;
  height: 50px;
  left: 100px;
  background-image: url('~@/assets/images/indeximg/left.png');
}
::v-deep .el-carousel__arrow--right {
  right: 100px;
  width: 50px;
  height: 50px;
  background-image: url('~@/assets/images/indeximg/right.png');
}

There are other ways to write, such as >>> Or is it /deep/, But it doesn't work here , So use ::v-deep

Take a brief note of