CSS 无原生作用域，限制样式影响范围需依赖命名约定（如BEM）、构建工具（CSS Modules）、框架特性（Vue/Svelte scoped）或Shadow DOM；:where()/:is()仅调节优先级，不提供作用域隔离。
CSS 选择器本身不能自动限制作用范围
单纯写一个 .btn 或 div p，它就会全局匹配所有符合条件的元素。CSS 没有内置“作用域”概念，不像 JavaScript 的 let 或模块作用域那样天然隔离。所谓“限制作用范围”，必须靠人为约定、工具介入或新机制配合实现。
三种主流限制样式作用域的方式
实际项目中，限制 CSS 影响范围主要靠以下路径，每种适用场景和代价不同：
-
命名空间前缀（BEM / OOCSS）：手动在类名里加业务/组件标识，比如
user-card__title、modal--dark。不依赖工具，但靠人遵守规范，易出错且冗长。 -
CSS Modules（构建时处理）：Webpack/Vite 等工具把
button.module.css中的.primary编译成类似Button_primary__abc123的唯一类名。JS 中通过import styles from './button.module.css'引用，天然隔离。 -
CSS Scoped（Vue / Svelte）：Vue 单文件组件中加
<style scoped>，Svelte 中用<style>默认即 scoped。它们底层是给元素加属性（如data-v-f3f4f5），再把选择器重写为.btn[data-v-f3f4f5]，实现运行时隔离。
使用 :where() 或 :is() 不会带来作用域限制
这些函数只影响**优先级计算**和**选择器书写便利性**，不改变匹配范围。例如：
.container :where(.btn, .link) { color: blue; }
它仍会匹配所有在 .container 内部的 .btn 和 .link，不管它们来自哪个组件或文件。很多人误以为 :where() 能“限定来源”，其实它只是让括号内各选择器的权重归零，避免优先级爆炸，跟作用域无关。
立即学习“前端免费学习笔记（深入）”；
Shadow DOM 是唯一原生硬隔离方案
只有在自定义元素中启用 Shadow DOM（element.attachShadow({ mode: 'open' })），内部的 <style> 才真正无法影响外部，外部样式也默认进不去（除非用 ::slotted 或 :host 显式设计接口）。这是浏览器级的作用域边界，但成本高：需手动管理 DOM 结构、事件穿透、样式透传等。
日常业务开发中，90% 场景靠 CSS Modules 或 scoped style 就够用；BEM 适合轻量项目或老系统维护；Shadow DOM 更适合原子化 Web Component 库。
