1、vue3 中使用 sass 时候的 穿透写法
:deep(.div_search_options){
//
}
而样式的穿透 多用于在项目自定义修改第三方 UI库的样式，用于满足本身项目的需要；
比如：vue常用的组件库（element-plus, vant, AntDesigin）
就需要用到样式穿透
2、scoped的原理
vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。
scoped进行渲染是遵循如下规则：
a、给HTML的DOM节点加一个不重复data属性(形如：data-v-123)来表示他的唯一性/
b、在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式
c、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了’样式模块化’的效果.
比如：
父组件
<template>
<div class="box">测试</div>
<Child/>
</template>
<script setup>
import { ref } from "vue"
import Child from './child.vue'
</script>
// 私有化样式
<style lang="scss" scoped>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
子组件：
<template>
<div class="child">
<span>Andy</span>
</div>
</template>
<script setup>
import { ref } from "vue"
</script>
<style lang="scss" scoped>
.child{
width: 50px;
height: 50px;
background-color: royalblue;
}
.child span{
color: rgb(24, 11, 1);
}
</style>
而如果我们想要在父组件中 修改 child 组件中 span 的color值，
需要如下
父组件
<template>
<div class="box">测试</div>
<Child/>
</template>
<script setup>
import { ref } from "vue"
import Child from './child.vue'
</script>
<style lang="scss" scoped>
.box{
width: 100px;
height: 100px;
background-color: red;
}
// 修改 子组件中 span 的字体颜色
.child :deep(span){
color: green;
}
</style>
