项目场景：
在做Vue项目的过程中，想要更改Element-ui中轮播图按钮的样式，发现按钮样式只能放在style中，如果放在style scoped中就不会生效。
问题描述
<style>/*生效*/.el-carousel__button {width: 40px;height: 40px;background-color: pink;border-radius: 20px;}</style>
<style scoped>/*不生效*/.el-carousel__button {width: 40px;height: 40px;background-color: pink;border-radius: 20px;}</style>
原因分析：
scoped属性的作用就是：加上scoped会使得样式只对当前的组件有用。对于某一个组件，如果style上添加了scoped属性，就相当于给当前子组件的结构中都添加上一个data-v-×××自定义属性。如：
如果子组件的根节点和父组件中书写的样式相同，那么也会被添加上相应的样式，但如果子组件中层次比较复杂，那就影响不到了。Element-ui作为网页的子组件，且轮播图的结构比较复杂，尤其到按钮的时候，已经不知道套了多少层了，因此此时，需要使用深度选择器。深度选择器可以实现样式穿透
原生CSS： >>>
less： /deep/
scss： ::v-deep
解决方案：
<style scoped>/*生效*/>>>.el-carousel__button {width: 40px;height: 40px;background-color: pink;border-radius: 20px;}</style>
如果觉得《【项目小tips】scoped属性的使用》对你有帮助，请点赞、收藏，并留下你的观点哦！
