ASP.NET Core MVC中CSS隔离对img标签不生效问题咨询

ASP.NET Core MVC 的CSS隔离机制在编译阶段会为每个视图、布局文件生成唯一的作用域自定义属性（格式为b-<随机哈希值>），默认规则下，编译器会把这个作用域属性绑定到你写的CSS选择器链的最后一个元素上。
你写的.navbar-brand img，编译后实际生成的CSS规则是：

.navbar-brand img[b-7x2kz9f4w] {
    width: 100px !important;
}

但布局页渲染时，作用域属性默认只会追加到布局直接声明的顶级关联元素上——也就是示例里的<a class="navbar-brand">标签会带上作用域属性，嵌套在它内部的<img>标签不会被自动添加这个属性，最终导致选择器匹配失败，样式不生效。

选任意一种即可：

• 方案1：用::deep深度选择器，不需要改HTML结构
  修改_Layout.cshtml.css的选择器，在父选择器和后代选择器之间加上::deep伪元素，告诉编译器把作用域属性绑定到::deep前面的父元素，而不是最后一个后代元素：

  .navbar-brand ::deep img 
  {
      width: 100px !important;
  }
  

  编译后生成的规则会变成.navbar-brand[b-7x2kz9f4w] img，只要父级a标签带作用域属性，就能匹配到内部的img，样式正常生效。
• 方案2：给目标img加独立类名，兼容性最好
  直接给img标签加专属类名，绕开后代选择器的作用域绑定问题：
  先改_Layout.cshtml里的img代码：

  <a class="navbar-brand" href="#">
       <img class="brand-logo" src="~/images/logo.png" />
  </a>
  

  再改_Layout.cshtml.css：

  .brand-logo 
  {
      width: 100px !important;
  }
  

  这种写法编译后生成的规则是.brand-logo[b-7x2kz9f4w]，编译器会自动给带这个类的img元素追加作用域属性，样式直接生效，基本不会出匹配问题。
• 方案3：移到全局样式（不推荐）
  如果这个logo样式需要全站复用，也可以把规则挪到wwwroot/css目录下的全局CSS文件里，不走CSS隔离，但这种方式会失去样式隔离的作用域优势，非必要不使用。

先确认你已经在_Layout.cshtml的<head>标签里引入了CSS隔离生成的样式文件，否则所有隔离样式都不会生效：

<link rel="stylesheet" href="~/{你的项目程序集名}.styles.css" asp-append-version="true" />

把占位符替换成你项目的实际程序集名称即可。

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