Blazor 的 CSS 隔离是通过 .razor.css 文件实现的原生样式作用域机制，编译时自动为选择器添加唯一属性前缀并注入对应属性到组件根元素，确保样式仅作用于当前组件；支持 ::deep 穿透和 :global() 全局回退，不依赖 Shadow DOM 或第三方库。
Blazor 的 CSS 隔离（CSS Isolation）是让组件样式只作用于当前组件、不污染全局的原生机制，不需要第三方库，也不依赖 Shadow DOM。核心是通过 .razor.css 文件实现自动作用域限定。
创建隔离 CSS 文件
在某个 Razor 组件（如 Counter.razor）同目录下，新建一个同名 CSS 文件：Counter.razor.css。Blazor 会自动识别并为其中所有选择器添加唯一属性前缀（如 _b_k2x9a1v4n3），同时给组件根元素注入对应属性，从而实现样式“仅在此组件内生效”。
- 文件名必须严格匹配（含大小写），且后缀为
.razor.css - 支持普通 CSS、CSS 预处理器输出（需构建工具配合，如 Sass 编译后手动命名）
- 不支持
@import，但可通过@layer或嵌套规则组织代码
样式如何被隔离？
编译时，Blazor 将 Counter.razor.css 中的规则重写。例如：
.my-button { color: red; }
div > p { font-size: 14px; }
会被转成类似：
立即学习“前端免费学习笔记（深入）”；
.my-button[_b_k2x9a1v4n3] { color: red; }
div[_b_k2x9a1v4n3] > p[_b_k2x9a1v4n3] { font-size: 14px; }
而组件的根元素（如 <div>）会被自动加上 <code>_b_k2x9a1v4n3 属性。这样浏览器自然只匹配该组件内的元素。
高级用法：穿透与全局回退
默认不能跨组件选中，但有几种可控的“破例”方式：
- 用
::deep前缀可穿透子组件边界（如::deep .child-class会影响 ChildComponent 内的元素） - 用
:global(...)包裹选择器可声明全局样式（如:global(.reset-button) { border: none; }） - 需要影响父级或兄弟组件？不行——这是设计约束，应改用 CSS 类传入或参数控制
调试与常见问题
打开浏览器开发者工具，查看组件元素的属性和样式面板，能看到自动生成的 scope 属性和重写后的选择器。常见问题包括：
- 样式没生效？检查文件名是否完全一致、是否在同一个文件夹、是否有拼写错误
- 全局样式被意外隔离？确认没误把
site.css改成site.razor.css - 热重载后样式丢失？重启开发服务器或清空
obj和bin目录（偶发 MSBuild 缓存问题）
基本上就这些。CSS 隔离不是黑魔法，它靠编译时重写 + 属性绑定实现，轻量、可靠、开箱即用。
