Blazor 的 CSS 隔离是通过 .razor.css 文件实现的原生样式作用域机制，编译时自动为选择器添加唯一属性前缀并注入对应属性到组件根元素，确保样式仅作用于当前组件；支持 ::deep 穿透和 :global() 全局回退，不依赖 Shadow DOM 或第三方库。
Blazor 的 CSS 隔离（CSS Isolation）是让组件样式只作用于当前组件、不污染全局的原生机制，不需要第三方库，也不依赖 Shadow DOM。核心是通过 .razor.css 文件实现自动作用域限定。
在某个 Razor 组件（如 Counter.razor）同目录下，新建一个同名 CSS 文件：Counter.razor.css。Blazor 会自动识别并为其中所有选择器添加唯一属性前缀（如 _b_k2x9a1v4n3），同时给组件根元素注入对应属性，从而实现样式“仅在此组件内生效”。
.razor.css
@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; }）打开浏览器开发者工具，查看组件元素的属性和样式面板，能看到自动生成的 scope 属性和重写后的选择器。常见问题包括：
site.css 改成 site.razor.css
obj 和 bin 目录（偶发 MSBuild 缓存问题）基本上就这些。CSS 隔离不是黑魔法，它靠编译时重写 + 属性绑定实现，轻量、可靠、开箱即用。
以上就是Blazor 怎么使用 CSS 隔离的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
406
收藏
