深度选择器

项目开发过程中，经常会使用到第三方组件库的组件，以便快捷的构建功能模块。

例如;使用 Element UI 的走马灯(轮播图)组件

<el-carousel height="150px">
     <el-carousel-item v-for="item in 4" :key="item">
         <h3 class="small">{{ item }}</h3>
    </el-carousel-item>
</el-carousel>
这个时候想修改左右箭头指示器的样式或者偏移位置

查看自带的样式代码

 无论是直接使用 button 标签选择器 还是其 类名 都无法选到来修改样式

这是因为在style中使用了 less(scss) 和 scoped

这个时候就需要用到 深度选择器了

例如，修改button大小和位置，使用::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');
}
还有其它写法如 >>> 或者是 /deep/,但是这里都不起作用，所以用::v-deep

原文链接：https://blog.youkuaiyun.com/YoungMan_09/article/details/124183560