CSS深度(穿透)选择器

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

前言：

今天在项目开发过程中，使用 Element UI 的走马灯(轮播图)组件，想去改左右箭头样式和下面的小圆点。使用发现改不了发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）。今天总结一下提升记忆。

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

当时我是要修改底部的横线变成4个小圆点

这是选中了轮播图，但是样式还是没有改变。 

<style scoped>
    .el-carousel__button{
        width:10px;
        height:10px;
        background:red;
        border-radius:50%;
      }
</stylet>

这时候就要用上我们的样式深度(穿透)选择器

原生css在类名前面加三个>就可以了 

<style scoped>
    >>>.el-carousel__button{
        width:10px;
        height:10px;
        background:red;
        border-radius:50%;
      }
</stylet>

我项目的下面变成红色的小圆点了。

还有Lees,Sass 的选择器

当项目中使用的 css 扩展语言是 less， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的        

<style lang="less" scoped>
    /deep/.el-button{
         span{
                color: '#25t'
         }
    }

    .el-button::v-deep{
         span{
                color: '#f44'
         }
    }
</style>

当项目中使用的 css 扩展语言是 node-sass， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式

<style lang="scss" scoped>
    .el-button::v-deep{
         span{
                padding:20px;
         }
    }

    /deep/.el-button{
         span{
                padding:20px;
         }
    }
</style>

总结：

1. 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/
2.  vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep
3.  对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用