Blazor从.NET 5开始原生支持组件级CSS作用域隔离，开发者只需为Razor组件附带一个同名的CSS文件，框架就会在编译阶段自动注入作用域属性，使样式仅对当前组件生效，从而避免全局样式污染。
如何启用Blazor组件CSS隔离
在项目中创建一个Razor组件，例如 Counter.razor，然后在同一目录下添加 Counter.razor.css 文件。该CSS文件中书写的样式会自动限定于Counter组件。
<!-- Counter.razor -->
<h3 class="title">计数器</h3>
<p class="count">当前值：@currentCount</p>
<button class="btn" @onclick="IncrementCount">增加</button>
@code {
private int currentCount = 0;
private void IncrementCount() => currentCount++;
}
/* Counter.razor.css */
.title {
color: #2b6cb0;
}
.btn {
background: #3182ce;
color: white;
border: none;
padding: 6px 12px;
}
编译后，Blazor会为Counter组件的元素添加类似 b-xxxxxxx 的属性，CSS变为 .title[b-xxxxxxx] 的形式，实现作用域隔离。
作用域隔离的实现原理
Blazor在构建时会扫描所有 .razor.css 文件，为每个组件生成唯一的哈希标记，并将该标记作为属性写入组件根及子元素。样式规则被重写以包含此属性选择器，因此只匹配带该属性的DOM节点。
查看生成结果
浏览器中检查元素时会看到如下结构：
<h3 class="title" b-abc12345>计数器</h3>
处理子组件与第三方样式
默认情况下，父组件的样式不会穿透到子组件内部。如果确实需要修改子组件或第三方组件样式，可以使用 ::deep 伪元素。
/* Parent.razor.css */
.parent ::deep .child-button {
font-weight: bold;
}
上述写法会让父组件内子组件的 child-button 类应用粗体，但仍受父组件作用域限制。
注意事项
- CSS隔离文件必须与组件同名且同目录
- 动态添加的类名同样受作用域属性约束
- 全局样式仍可放在 wwwroot 下的标准CSS中
小结
利用Blazor内置的CSS作用域隔离，可以用极低的成本完成组件样式封装，减少团队协作中的样式冲突。配合 ::deep 可灵活处理嵌套场景，是Blazor前端工程化的基础实践。