使用深度选择器来修改子组件的样式，今天遇到一个需求，在el-drawer中嵌入的el-date-picker，再一次总结一下深度选择器的用法，需求如下：

template内容：

<el-drawer size="70%" v-model="drawer" title="选择年份" :show-close="false" direction="rtl">
   <el-date-picker v-model="selectedDate"  :disabledDate="disabledDate" type="year" placeholder="选择年"></el-date-picker>
</el-drawer>

使用less和scoped的CSS如下：

.el-input__inner{
    font-size: 26px;
}

目的是修改选择的年份的大小，让其显示为26px大小。结果运行代码，效果如下：

我们发现显示的年份字号并没有变大。我们同时添加字体颜色和对齐方式，以更清楚的看到效果，使用深度选择器进行控制。修改如下：

 

:deep(.el-input__inner){
    font-size: 26px;
    text-align: center;
    color:rgb(8, 101, 172) ;
}

运行效果如下：

---

总结深度选择器用法如下：

由于vue组件的封装目的是为了让组件之间不互相影响，着很好的解决了组件之间相互干扰的问题。但是同时也带来了一些问题：有时候又需要修改子组件的样式，此时vue中，我们可以使用深度选择器，在父组件中来影响子组件，从而解决这个问题。

• CSS原生使用符号">>>"进行深度。
• 在使用了CSS的预编译器时，
  1. VUE2中，可以使用/deep/或::v-deep进行深度选择
  2. VUE3中，推荐使用:deep(selector)进行深度选择

---

其他几个CSS相关的选择：

• :slotted()

:slotted()：在子组件定义样式插槽内容样式

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。

<template>
  <div>
    <slot>插槽内容，如果外部给出，则替换掉</slot>
  </div>
</template>
 
<style lang="less" scoped>
:slotted(.blue) {
  color: blue;
}
</style>

• :global()

:global() ：全局选择器，定义全局样式，不用单开一个没有scoped的style。

<style scoped>
:global(.el-input__inner) {
    color: red;
}
</style>
<!-- 等效于 -->
<style>
 .el-input__inner{
     color:red
 }
</style>

• 动态css（v-bind）

vue3单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态，也就是我们可以在style标签中引入script标签中的响应式变量。

<template>
    <span class='sc'>
        span 内容
    </span>
</template>
 
<script setup>
import { ref } from 'vue';
const redColor = ref('red')
 
</script>
 
<style scoped>
.sc{
    color: v-bind(redColor);
}
</style>