Razor代码未赋予隔离唯一名称致CSS隔离失效问题求助

问题描述 #

在ASP.NET Core项目中，_Layout.cshtml内编写的<img>元素未被自动添加CSS隔离属性（如b-u43b921rpo），但对应的_Layout.cshtml.css生成的选择器却包含该属性，导致样式无法匹配生效：

• 布局代码：

<!--_Layout.cshtml-->
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
    <img src="~/img/Dimensions360_Logo_192x113.png" />
</a>

• 生成的隔离CSS：

a.navbar-brand > img[b-u43b921rpo] {
    height: 75px;
    float: left;
    margin-left: 15px;
    margin-top: 2px;
}

问题原因 #

ASP.NET Core的CSS隔离机制默认仅为布局所包裹的子页面/组件内容注入隔离属性，布局自身直接编写的HTML元素不会自动添加该属性，导致选择器不匹配。

解决方法 #

1. 使用:deep()伪类穿透隔离 #

修改布局的CSS文件，通过:deep()伪类忽略子元素的隔离属性要求，确保样式能作用到布局内的元素：

/*_Layout.cshtml.css*/
a.navbar-brand > :deep(img) {
    height: 75px;
    float: left;
    margin-left: 15px;
    margin-top: 2px;
}

2. 手动为元素添加隔离属性 #

从生成的CSS文件中复制隔离属性名（如b-u43b921rpo），直接添加到布局内的HTML元素上：

<!--_Layout.cshtml-->
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
    <img src="~/img/Dimensions360_Logo_192x113.png" b-u43b921rpo />
</a>

注意：该属性名会随项目重新构建变化，需同步更新。

3. 封装为Blazor组件 #

将导航品牌部分封装为独立的Blazor组件（如NavBrand.razor），组件内的元素会自动被注入隔离属性，组件对应的CSS文件（NavBrand.razor.css）可正常生效，最后在布局中引用该组件即可。

内容的提问来源于stack exchange，提问作者mariocatch