CSS 穿透（深度选择器）

什么是穿透
CSS 穿透是指通过父元素的选择器选择到其子元素或兄弟元素的样式，从而不需要添加额外的类或 ID 来选中这些元素。

什么时候用
当我们使用第三方 UI 组件库时，可能无法修改组件的内部结构或添加额外的类名，但我们希望修改某个组件内部元素的样式。这时就可以通过 CSS 穿透来实现。

怎么用

<template>
   <view>
      <!-- 自定义控件 -->
      <view class="customView">
          <view class="bgview">我是一个标题,看下我的背景色 </view>
      </view>
    </view>
</template>

下面通过穿透修改bgview的背景色

<style scoped lang="scss">

     .customView /deep/ .bgview {
          background: #C00000;
       }
        
      .customView ::v-deep .bgview {
           background: #C00000;
        }


</style>

或者 

 <style scoped >
    .customView >>> .bgview {
       font-size: 34rpx;
       color: hotpink;
     }
</style>

需要注意的点: 需要在 scoped 样式中使用,防止全局样式被污染

vue2.x

第一种写法箭头三剑客（原生css）：>>>
.类名 >>> .类名{ 样式 }

第二种（预处理器：sass、less）：/deep/
/deep/ .类名{ 样式 }

第三种（预处理器：sass、less）：::v-deep
::v-deep .类名{ 样式 }

vue3.x

第一种：:deep()
:deep( .类名 ){ 样式 }

第二种：::v-deep()
::v-deep( .类名 ){ 样式 }