vue3中操作样式的变化

1. 深度作用域选择器 :deep()

:deep()是Vue 3的推荐语法，取代了Vue 2中的>>>、/deep/、::v-deep等。

2.全局选择器 :global()

即使<style>标签有scoped属性，:global()内的选择器也会声明为全局样式，即不添加组件唯一属性，影响整个应用。

<style scoped>
:global(.red) {
  color: red;
}
</style>

定义跨组件的统一样式，如主题色、公共字体。

不想额外创建非scoped的<style>块时，都可以用

3.插槽选择器 :slotted()

默认情况下，插槽内容（slot）的样式不受子组件scoped样式的影响。使用:slotted()可以专门选择并样式化父组件传递进插槽的内容。

4. 样式模块化（CSS Modules）

CSS Modules为每个类生成唯一哈希名，实现样式真正隔离，避免全局污染。适合大型项目、组件库开发。

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>