最简单有效的方式是在 Vue 单文件组件中使用 ，它通过添加唯一属性和重写选择器实现样式局部化；其他场景需用类名隔离、CSS Modules 或 Shadow DOM。

直接在模块内部使用 <style scoped></style> 是最简单有效的方式，但要注意它只在 Vue 单文件组件中原生支持；其他场景需靠 CSS 类名隔离、CSS Modules 或 Shadow DOM 实现真正局部化。

Vue 中用 scoped 属性快速局部化

在 .vue 文件的 <style></style> 标签上加 scoped，Vue 会自动为该组件内所有元素添加唯一属性（如 data-v-f3f3eg9），并重写样式选择器，确保样式只作用于当前组件。

示例：

注意：scoped 不影响子组件默认样式，如需穿透（例如修改子组件根元素），可用 ::v-deep 或 :deep()（Vue 3）。

普通 HTML 页面：靠类名命名空间隔离

没有构建工具时，手动给模块外层加唯一类名（如 module-user-card），所有样式都以此为前缀编写，避免全局污染。

• 给模块容器设一个高辨识度类名：<section class="module-product-list"></section>
• 所有样式写成：.module-product-list h2、.module-product-list .item
• 可配合 BEM 规范增强可维护性，例如：.product-list__header

现代前端项目：启用 CSS Modules

Webpack/Vite 等工具支持 CSS Modules，它会自动将类名哈希化，保证局部性。只需把文件命名为 Component.module.css，再通过 JS 导入使用。

示例（React + Vite）：

/* Card.module.css */
.root { padding: 16px; }
.title { font-size: 1.2em; }

/* Card.jsx */
import styles from './Card.module.css';
export default function Card() {
  return

    

Hello

  

;
}

强隔离需求：用 Shadow DOM 封装样式

适用于 Web Components 或需要彻底隔离的模块（比如嵌入第三方页面的小工具）。Shadow DOM 内部样式默认不泄漏，外部样式也无法穿透（除非显式用 :host 或 ::slotted）。

• 创建 shadow root：element.attachShadow({ mode: 'open' })
• 往 shadow 中注入 HTML 和 <style></style>，这些样式仅在此范围内生效
• 适合封装独立 UI 小部件，如自定义按钮、弹窗等