ASP.NET Core 6打包器处理CSS a:has子选择器时出错

问题根源 #

ASP.NET Core 6配套的Bundler & Minifier工具版本不支持CSS Selectors Level 4标准中的:has()伪类选择器，导致解析时抛出语法错误。

可行解决方案 #

1. 替换为支持现代CSS的打包工具 #

• 改用LibMan替代Bundler & Minifier：它对新CSS特性的兼容性更好，可直接支持:has()语法
• 迁移到Webpack/Vite等前端构建工具：完全兼容现代CSS标准，同时能提供更强大的构建能力

2. 用JavaScript模拟:has()效果（无需更换打包工具） #

如果暂时无法更换打包流程，可通过JS实现相同逻辑：

// 遍历目标元素，为符合条件的a标签添加自定义类
document.querySelectorAll('.myclass a').forEach(anchor => {
  if (anchor.querySelector('i.other-class')) {
    anchor.classList.add('target-styled-link');
  }
});

然后在CSS中使用自定义类替代:has()：

.myclass a.target-styled-link {
  /* 原:has()选择器中定义的样式 */
}

3. DOM结构固定时的降级写法（局限性大） #

如果i.other-class是a的直接子元素且结构不会变动，可尝试这种写法，但仅能间接实现类似效果（注意样式目标的变化）：

/* 仅当i是a的直接子元素时，通过子选择器关联样式（需调整样式作用逻辑） */
.myclass a > i.other-class {
  /* 此处样式作用于i元素，若要给a元素设置样式需借助CSS继承或额外逻辑 */
}

注：方案3仅适用于DOM结构完全固定的场景，通用性差，不推荐作为长期解决方案。

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