前言：
今天在项目开发过程中，使用 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>
总结：
操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器::v-deep比较通用
