直接加 class="scope" 没用，因为浏览器不识别“作用域类”，bootstrap 的 .btn 等选择器是无前缀的全局声明，不会自动匹配父类；真正有效的是 sass 编译时包裹、类名前缀手动书写或 :where() 封装，核心是让选择器带真实存在于 dom 根节点的父级上下文。
直接加 class="scope" 为什么没用
因为浏览器不认“作用域类”这种概念。你写 <div class="my-card"><button class="btn">点我</button></div>，再引入 Bootstrap 的 bootstrap.min.css，里面所有 .btn 规则都是无前缀的全局声明——它根本不会因为你套了个 my-card 就自动变成 .my-card .btn。结果就是：页面上所有 .btn 都被改了样式，完全没隔离。
真正起效的三种方式（按推荐顺序）
核心逻辑只有一条：让选择器带上明确的父级上下文，且该上下文必须真实存在于 DOM 根节点上。
-
类名前缀 + 手动书写：根元素加
class="my-card"，所有 CSS 都以它为前缀，比如.my-card .title、.my-card .content；BEM 命名（.my-card__title）可进一步降低冲突风险 -
Sass 编译时包裹：在自定义 SCSS 文件中写
.my-card { @import "bootstrap/scss/buttons"; @import "bootstrap/scss/utilities"; }，这样生成的 CSS 里所有规则都自动带前缀，.btn变成.my-card .btn -
:where() 降权封装（现代浏览器）：用
:where(.my-card) .title { ... }替代.my-card .title，避免特异性过高导致覆盖困难；注意:where()不支持嵌套，也不能写成:where(.my-card .title)
Vue/React 中 scoped 样式的真实行为
它们不是靠 CSS 本身实现隔离，而是构建工具在编译时干的两件事：给组件内每个元素加唯一属性（如 data-v-abc123），同时把选择器重写成 .title[data-v-abc123]。所以：
-
<style scoped></style>对已加载的第三方 CSS（比如 CDN 引入的 Bootstrap）完全无效 - 子组件的根元素会被打上相同属性，但子组件内部的样式仍由它自己的
scoped控制，父组件无法直接选中 - 需要穿透时用
:deep(.el-input)或:global(.modal)，但:global()写在哪个组件里，就只在那个组件挂载时生效——异步渲染的弹窗若未挂载，样式就不存在
最容易被忽略的污染点
就算用了前缀或 scoped，以下几类写法仍会逃逸出去，造成意外污染：
- 在组件样式里写了
button { padding: 8px; }—— 这是标签选择器，没限定父级，全站按钮都会变 - 用了
* { box-sizing: border-box; }—— 通配符无视任何作用域，直接全局生效 - JS 动态插入的 DOM（如 Bootstrap Modal 默认插到
document.body）脱离了你的容器，样式找不到对应前缀，自然不生效 - CSS 变量声明在
:root里，然后组件里color: var(--text-primary);—— 看似局部，实则变量值是全局统一的
关键不在“写了什么”，而在“声明位置是否真的限制了作用域”。父级类名要出现在 DOM 根节点，变量要声明在组件选择器内，JS 插入的节点得手动指定 container 选项——少一个环节，隔离就漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
