.NET6 Razor Pages中asp-page标签助手无法应用CSS样式问题求助

.NET 6 Razor Pages 的CSS隔离功能在编译阶段生效，Razor SDK会为每个带对应.cshtml.css隔离样式文件的页面/布局生成唯一的作用域标识属性（你示例中的b-l76pcumf24就属于这类标识），默认仅会自动将该标识注入到页面内的静态HTML标签上，同时给隔离样式文件内的所有选择器自动拼接对应属性选择器，实现样式范围限制。
带asp-page属性的元素属于标签助手动态渲染内容，编译阶段Razor SDK无法提前识别这类动态输出的最终标签，不会自动给它们附加作用域标识，因此渲染后的标签匹配不上已经拼接了属性选择器的隔离样式规则，就会出现样式不生效的问题。

• 方法1：使用深度匹配规则
  如果你使用的是.NET 7及以上版本，可以直接在_Layout.cshtml.css的对应选择器前添加::deep标记，示例如下：

  /* 调整前 */
  a {
    color: #333;
  }
  /* 调整后 */
  ::deep a {
    color: #333;
  }
  

  加了::deep的选择器不会被自动拼接作用域属性限制，可以匹配到当前布局内所有动态生成的对应元素，同时样式不会泄漏到其他未应用该布局的页面。
• 方法2：固定作用域标识后手动附加
  你可以在项目.csproj文件中配置固定的CSS隔离标识，避免自动生成的标识每次编译变化，之后手动给标签助手元素添加该标识即可：
  1. 编辑项目.csproj文件，在PropertyGroup节点下添加如下配置：

     <CssScope>layout-custom-scope</CssScope>
     

  2. 给带asp-page的a标签手动添加该属性：

     <a asp-page="TEST/Index" layout-custom-scope>TEST1</a>
     

• 方法3：将对应样式迁移到全局CSS文件
  直接把需要作用于标签助手生成元素的样式规则，挪到wwwroot/css目录下的全局CSS文件中，全局样式不受隔离规则限制，可正常匹配所有对应元素。
• 方法4：替换为静态a标签
  如果你不需要asp-page提供的动态路由匹配、路径自动生成能力，可以直接把标签助手写法替换为静态href的a标签，编译时会自动加上作用域标识，正常适配隔离样式。

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