当前位置：网站首页>深度选择器

深度选择器

2022-04-23 09:54:00 【YoungMan_09】

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

例如;使用 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

简单记录一下

版权声明
本文为[YoungMan_09]所创，转载请带上原文链接，感谢
https://blog.csdn.net/YoungMan_09/article/details/124183560

边栏推荐

猜你喜欢

随机推荐