以下内容来自AI

样式方案	核心特点	适用场景
Scoped CSS	使用 scoped属性，通过唯一属性（如 data-v-xxx）将样式限定在当前组件，避免全局污染。	最常用，适用于绝大多数情况，确保组件样式独立。
CSS Modules	使用 module属性，将类名编译为唯一哈希值，并通过 $style对象或自定义名称在模板中引用。	需要严格的样式隔离，尤其是在 JSX/TSX 组件或需要程序化访问类名时。
全局样式​ (Global CSS)	不加 scoped或 module的 <style>标签，样式会作用于整个应用。	定义基础样式、重置样式或所有组件共享的通用样式。

特殊选择器与动态样式（基于Scoped CSS）

除了上述主要方案，Vue 3 还提供了一些特殊的选择器和动态功能来解决特定问题：

深度选择器 (:deep())

https://blog.csdn.net/zlpzlpzyd/article/details/155699201

插槽选择器 (:slotted())

默认情况下，Scoped CSS 不会影响通过 <slot>插入的内容。使用 :slotted()可以精确地为插槽内容设置样式。

<style scoped>
:slotted(.slot-content) {
  border: 1px solid green;
}
</style>

全局选择器 (:global())

如果你在 Scoped CSS 中希望某条规则全局生效，不必单独写一个 <style>标签，可以使用 :global()伪类。

<style scoped>
:global(.global-notification) {
  font-weight: bold;
}
</style>

状态驱动的动态 CSS

这是 Vue 3 一个非常实用的特性，允许你使用 v-bind()函数在 CSS 中直接绑定组件的响应式数据，实现动态样式。

<script setup>
import { ref } from 'vue';
const textColor = ref('#ff0000');
</script>

<template>
  <p>这段文字的颜色会动态改变</p>
</template>

<style scoped>
p {
  color: v-bind(textColor);
}
</style>

如何选择？

• 追求简单和独立：优先使用 Scoped CSS。

• 需要极高封装性或配合 JS 逻辑：考虑 CSS Modules。

• 需要覆盖子组件样式：在 Scoped CSS 中使用 :deep()。

• 需要为插槽内容定义样式：使用 :slotted()。

• 希望在组件内写少量全局样式：使用 :global()。

• 样式需要随组件状态变化：使用 v-bind()​ 实现动态 CSS。