vue3已经面世将近3年了，经过不断的迭代终于稳定，且有不断的企业开始使用Vue3进行新项目的研发。vue3中的css的应用，也得到了显著提升。
一、组件作用域scoped
当组件内的<style>标签加上scoped属性的时候，代表这个style标签的样式将变成此vue单文件私有的标签，其他组件无法使用此标签，这一点和vue2一致。其原理是通过PostCSS对标签进行加密，如：
<style scoped>
.蟹黄堡 { color: blue; }
</style>
<template> <div class="蟹黄堡">hi</div> </template>
会变成:
<style>
.蟹黄堡[data-v-f3f2eg2] { color: blue; }
</style>
<template> <div class="蟹黄堡" data-v-f3f2eg2>hi</div> </template>
二、深度选择器
当组件上使用了scoped属性后，我们还想要对子组件的样式进行干预，怎么办呢？
对，我们可以使用less 的/deep/或者scss的::v-deep。但vue3自己也出了一个可以干预的办法，那就是:deep(*)伪类。
这样
<style scoped> .蟹老板 :deep(.痞老板) { /* 揍痞老板 */ } </style>
会变成:
.美伢[data-v-f3f3eg9] .痞老板 { /* 揍到了 */ }
三、插槽选择器
顾名思义，就是针对插槽中的元素，进行样式的干预。默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以明确地将插槽内容作为选择器的目标：
<template>
//我是插槽
<slot>/*被插进的内容*/</slot>
</template>
<style scoped>
:slotted(被插进的内容){
样式
}
</style>
四、全局选择器
此选择器是为了让部分在scoped中的样式可以作用于全局，慎用，容易造成样式污染。
<style scoped>
:global(.海绵宝宝) { color: yellow ; }
</style>
五、混合使用局部与全局样式
这个功能在vue2上也可以使用，你可以同时使用<style></style>和<style scoped></style>，像这样:
<style> /* 全局样式 */ </style>
<style scoped> /* 局部样式 */ </style>
注:作用域样式中，尽量使用class和id选择器来代替[attr]属性选择器，以避免性能损失
六、CSS Modules
类似script Modules,将style标签进行模块化的划分：
<style module='name'>/*模块内的样式*/</style>
此时，你可以在template中，直接用name.**来进行样式的使用，如果module没有付名，默认使用$style.**；也可以在script setup中，使用useCssModule来对CSS Modules进行访问：
import { useCssModule } from 'vue'
// 在 setup() 作用域中...
// 默认情况下, 返回 <style module> 的 class
useCssModule()
// 具名情况下, 返回 <style module="classes"> 的 class
useCssModule('classes')
七、v-bind
v-bind应该是最亮眼的一次进化了，因为它提供了js直接使用css的桥梁，像这样:
<template>
<div class="派大星">你好~我是派大星!</div>
</template>
<script>
export default {
data() {
return { color: 'pink' }
}
} </script>
<style>
.派大星 {
color: v-bind(color);
}
</style>
或者是这样:
<script setup>
const 章鱼哥 = { color: 'darkseagreen' }
</script>
<template>
<p>你好~我是章鱼哥！</p>
</template>
<style scoped> p { color: v-bind('章鱼哥.color'); } </style>
完结
这就是vue3为对CSS应用的全部进化了，希望能帮到你！
