CSS Vue3深度选择器

技术栈：Vue3 TypeScript Vite Vant

1.在template中的布局

<div class="box">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      fixed
      title="注册"
      right-text="注册"
      @click-right="onClickRight"
    ></van-nav-bar>
 </div>

2. 当我们在style标签中需要改变vant组件的样式时，需要使用到深度选择器

背景：scope样式私有化，避免样式冲突

原理：在css中使用过选择器的选择过元素 (组件下)元素生成添加一个属性 => data-v-hash值 webpack或vite打包时自动生成添加

3. 深度作用选中符语法：原理就是提高选择器的权重，权重不够再使用 !important

vue2: /deep/

vue2: 使用Sass时 ::v-deep 类名{ }

vue3: ::v-deep()

/**
写法：
1. ::v-deep() 类名 {}
2. ::v-deep() { 类名:样式 }
 */

.box {
  // 当我们选择了 box这个类名，经过vite打包会给box这个元素添加 自定义属性=哈希值
  // 在浏览器中查看： .box[data-v-20207095] { border: 2.85714vw solid blue; }
  border: 2px solid red;
}

::v-deep() {

  // 而 .van-nav-bar这个类名没有添加样式，所以这个元素不会添加 自定义属性
  .van-nav-bar {

    // 而.van-nav-bar__arrow这个元素会被添加自定义属性，因为选择到了这个元素
    // 在浏览器中查看： [data-v-cd3f3966] .van-nav-bar__arrow { font-size: 5.14286vw; }
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }

    &__text {
      font-size: 15px;
    }
  }
}

// &指外层父拼接类名： van-nav-bar__arrow
// &指外层父拼接类名： van-nav-bar:hover

4. 元素的自定义属性不存在，解决：

/**

 情况一 ：元素身上有 data-vhash 属性，可以直接修改元素的样式，不需要深度选择器
 .van-nav-bar {
  border:3px solid red
 }


 情况二 ：元素身上没有 data-v-hash 属性，需要使用深度选择器

 深度选择器语法1：
 ::v-deep() .van-nav-bar {
  border:3px solid red
 }

 深度选择器语法2：
 ::v-deep() {
    .van-nav-bar {
      border: 3px solid red;
    }
  }
*/