Blazor CSS隔离是编译期自动绑定机制：需严格匹配同名同目录的.razor.css文件，自动生成唯一属性选择器（如[b-2j5x8v9q7c]）实现作用域隔离，不依赖手动引入或运行时处理。
CSS 隔离不是“引入”，而是编译期自动绑定 —— 你写 Counter.razor.css，Blazor 就会把它和 Counter.razor 绑定，不需 @import、不需 <link> 手动引用。
文件名和路径必须完全一致
Blazor 只认严格匹配的配对关系：同目录、同名、后缀为 .razor.css。比如 Pages/Counter.razor 对应的隔离样式文件只能是 Pages/Counter.razor.css，多一个空格、大小写错一个字母、放在子文件夹里，都会失效。
-
Counter.razor.css✅（正确） -
counter.razor.css❌（大小写不一致，Windows 下可能侥幸通过，Linux/macOS 构建直接忽略） -
Counter.css❌（缺少.razor中间段，不会被识别为隔离样式） -
Pages/Components/Counter.razor.css❌（路径不一致，Counter.razor不在Components子目录下）
样式生效但没看到效果？先查生成的属性和选择器
浏览器里打开开发者工具，选中组件内元素（比如 <h1></h1>），看它是否带了类似 b-2j5x8v9q7c 的属性；再看 Styles 面板里，对应规则是不是变成了 h1[b-2j5x8v9q7c] 这种形式。如果没出现，说明文件根本没进构建流程。
- 检查
.csproj是否意外删掉了<enabledefaultcontentitems>true</enabledefaultcontentitems>（默认开启，手动关掉会导致.razor.css被跳过） - 用记事本打开
.razor.css文件，确认编码是 UTF-8 无 BOM —— VS Code 默认保存带 BOM，某些版本 MSBuild 会静默跳过带 BOM 的 CSS 文件 - 修改后热重载无效？清空
obj/和bin/目录再重启dotnet watch，避免旧的 scope 属性缓存干扰
::deep 和 :global() 是唯一可控的“破例”方式
默认情况下，Counter.razor.css 里的 .btn 永远不会影响 ChildComponent.razor 里的按钮。想穿透一层，必须显式用 ::deep；想声明全局重置或第三方库适配，才用 :global()。
立即学习“前端免费学习笔记（深入）”；
-
::deep .child-button { color: red; }→ 编译后变成[b-xxx] .child-button，只影响当前组件 DOM 树下的子组件元素 -
:global(.modal-overlay) { z-index: 1000; }→ 这条规则完全脱离隔离，等价于写在wwwroot/css/site.css里 - 别写
::deep ::deep .grandchild——::deep不递归，孙子组件要样式，得让中间子组件也暴露 class 接口或用 CSS 自定义属性传值
真正容易被忽略的是构建阶段的静默失败：没有报错、没有警告，只是样式“凭空消失”。问题往往不出在 CSS 写法，而在文件是否被 MSBuild 当作内容项纳入编译流程，以及编码是否干净。调试时别只盯着浏览器渲染结果，先确认 obj/Debug/net6.0/scopedcss/projectbundle/YourApp.styles.css 里有没有你期望的带 [b-xxx] 的规则。
