Blazor组件CSS隔离通过编译期重写实现：Razor编译器为.razor文件对应HTML元素添加唯一属性，并重写同名.razor.css中选择器以限定作用域；文件命名、编码、构建包含及渲染模式均需严格匹配。
Blazor组件CSS隔离是怎么工作的
Blazor的CSS隔离不是靠运行时注入或作用域模拟，而是编译期重写：当你在.razor.css文件中写样式，Razor编译器会自动为该组件内所有HTML元素添加一个唯一属性（如b-2j5x8v9q7c），同时把CSS选择器也加上这个属性限定。最终生成的CSS只匹配本组件的DOM，不污染全局。
关键点在于文件命名必须严格匹配：ComponentName.razor 对应 ComponentName.razor.css（注意不是.css单独后缀，也不是ComponentName.css）。大小写、空格、路径层级都必须一致。
为什么写了Component.razor.css却没生效
常见失效原因不是语法问题，而是构建链路中断：
-
.razor.css文件未被包含在项目文件（.csproj）中 —— 默认SDK会自动包含，但若手动删过<itemgroup></itemgroup>或改过<enabledefaultcontentitems></enabledefaultcontentitems>，可能漏掉 - 文件编码不是UTF-8无BOM —— 某些编辑器保存时加了BOM，导致编译器跳过处理，控制台无报错但样式不生成
- 使用了
@import或@layer等CSS新特性 —— 当前Blazor CSS隔离仅支持标准CSS语法，不解析嵌套或模块化指令 - 组件被
RenderMode = RenderMode.Static渲染（如SSR预渲染）且未启用InteractiveServer或InteractiveWebAssembly—— 隔离样式依赖交互式渲染管道注入<style></style>标签
如何在CSS隔离中选中子组件或穿透样式
CSS隔离默认阻止跨组件样式影响，但有时需要显式透出或接管：
立即学习“前端免费学习笔记（深入）”；
- 用
::deep伪类穿透到子组件内部（仅对直接子组件有效）：/* 在Parent.razor.css中 */<br>::deep .child-button { color: red; } - 用
:global(.class)声明全局样式（慎用，会脱离隔离）：:global(.modal-overlay) { z-index: 1000; } - 若需深度穿透多层（如子组件里还有孙子），
::deep不递归，得让中间组件也提供class出口，或改用CSS自定义属性传递主题 - 动态class绑定（
class="@CssClass"）不受隔离影响，但class名本身不会被重写 —— 所以.my-custom仍需在.razor.css里定义，否则不生效
调试CSS隔离样式时看哪里
别只盯着浏览器开发者工具的Elements面板 —— 那里看到的是已加属性的运行时DOM，真正要查的是生成的CSS来源：
- 打开浏览器Network面板，筛选
css，找类似_content/MyApp/MyComponent.razor.css的请求（开发时是内联在里的，但源路径仍可追踪） - 检查该CSS内容是否含目标选择器，且带
[b-xxxx]属性 —— 如果没有，说明编译未识别该文件 - 右键组件元素 → “Inspect” → 看Computed标签页里
color等属性的来源，是否指向MyComponent.razor.css行号 - 修改
.razor.css保存后，观察是否触发热重载（Hot Reload）并刷新样式 —— 若无反应，大概率是文件未参与构建
最常被忽略的是：CSS隔离只作用于组件自身@page或@inherits定义的根元素及其后代，不包含RenderFragment传入的外部内容，也不影响JS Interop动态插入的DOM节点。
