CSS深度穿透选择器（＞＞＞,/deep/,::v-deep）

项目场景：

提示：这里简述项目相关背景：

例如：项目场景：用swiper第三方组件写一个轮播图，写好之后，想把轮播图的圆点修改样式，在原有组件style样式中，结果修改无效。

---

问题描述

提示：这里描述项目中遇到的问题：

这是swiper组件，组件中有“swiper-pagination-bullet-active”属性，这个就是控制轮播图圆点的选择器，直接使用类选择器是无效的

<template>
<div class="wrapper">
 <swiper :options='swiperOption'>
  <swiper-slide v-for="item in swiperList" :key="item.id">
    <img class="swiper-img" :src="item.imgUrl">
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
 </swiper>
 </div>
</template>
<script>
export default {
    
    
  name: 'HomeSwiper',
  data () {
    
    
    return {
    
    
      swiperOption: {
    
    
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [
        {
    
    
          id: '001',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
        },
        {
    
    
          id: '002',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1712/91/a275569091681d02.jpg_640x200_0519ccb9.jpg'
        }
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
.wrapper .swiper-pagination-bullet-active
  background: #fff
.wrapper
  width: 100%
  height 31.25vw
  background: #eeE
  .swiper-img
    width: 100%
</style>

---

原因分析：

提示：这里是问题的分析：

这个问题主要是因为scoped的问题，只要有scoped存在，那么vue在编译时就会在选择器加上独一无二的属性标签
类似“data-v-hash”，因为有这种属性选择器存在并且在自身组件是独一无二的，而第三方默认组件有自身的样式，人家本身没这个scoped带来的属性，那在你自身选择器加上scoed后，压根就没有这个属性。所以你在修改样式时会因为找不到符合条件的选择器而修改样式失效。

<style scoped></style>

解决方案：

提示：这里填写该问题的具体解决方案

经过查阅资料文档，第一是把style样式的“scoped”去掉，scoped存在，会把style样式私有化，简单来说就是把组件自身的样式作用于自身的元素，不会影响其他组件。
不过scoped本身存在就是为了防止全局污染，不能丢了西瓜捡芝麻，所以还是选择深度选择器

1.当项目中使用css原生样式时，需使用>>>深度选择器来修改 外用第三方组件的样式

 <style lang="css" scoped>
  .el-button >>> span{
    
    
      color: 'red'
  }
</style>

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

   <style lang="less" scope>
    /deep/.el-button{
    
    
      span{
    
    
        color: 'red'
      }
    }
   </style>

或者

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

总结：

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

---