vue css样式穿透

1. 关于常规css样式的穿透语法 >>>

<style scoped>
    >>> .boxFather .boxChild{
        width: 200px !important;
    }
</style>

2. 关于预处理语言less的样式穿透语法 /deep/

<style scoped lang="less">
 .boxFather {
   /deep/ .boxChild{
           width: 200px!important;
        }
    }
</style>

3. 关于预处理语言scss的样式穿透语法 ::v-deep

<style scoped lang="scss">
 .boxFather {
   ::v-deep .boxChild{
           width: 200px!important;
        }
    }
</style>

4.关于vue3 :deep() 深度选择器使用

#swiper >.swiperContext :deep(.text) {
  width: 100px;
  height:60px;
  background: #000;
  border:5px solid #ccc;
  box-sizing: border-box;
  color: #fff;
  border-radius: 5%;
}