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 隔离不是黑魔法，它靠编译时重写 + 属性绑定实现，轻量、可靠、开箱即用。
