CSS使用&:hover/&:focus报Unknown property name且样式不生效如何解决

&:hover、&:focus这类带&的嵌套选择器写法，最早是Sass/Less等CSS预处理器提供的语法，原生CSS在2023年才正式纳入规范，出现「Unknown property name」报错的核心原因是当前运行/校验环境不识别该语法：

• 直接编写原生.css文件且未做任何编译配置时，旧版浏览器、IDE默认的CSS语法校验规则会把&开头的嵌套块判定为非法属性，直接抛出属性名未知错误，对应样式也不会被解析。
• 即便使用支持原生CSS嵌套的高版本浏览器，若项目内的CSS语法校验规则未同步更新，依然会触发同类报错。

方案1：全兼容平铺写法（无额外依赖，推荐） #

不需要引入任何编译工具、不需要考虑浏览器兼容，直接把嵌套的伪类选择器拆成独立的标准CSS写法即可，样式效果和嵌套写法完全一致：

.pageElement a.main {
  font-size: 0.95vw;
  font-size: 18px;
  font-weight: 400;
  font-stretch: semi-condensed;
  color: #FFFFFF !important;
  background-image: linear-gradient(#46c7e7, #4689E7);
  padding: 6px 14px 8px 14px;
  border-radius: 25px;
  letter-spacing: -0.1px;
  margin: 0 0 0 4%;
  display: inline-flex;
  justify-items: center;
  align-items: center;
  white-space: nowrap;
}

.pageElement a.main:hover,
.pageElement a.main:focus {
  color: #FFFFFF !important;
  background-image: linear-gradient(#DB0000, #A80000);
}

修改后保存即可生效，不会再触发语法报错。

方案2：保留嵌套写法，配置支持环境 #

如果需要保留嵌套写法精简代码，可选择以下任意一种配置方式：

• 使用CSS预处理器：将文件后缀从.css改为.scss/.less，在项目中安装对应预处理器依赖（如sass包），构建工具会自动将带&的嵌套语法编译为浏览器可识别的标准CSS，无运行兼容问题。
• 使用原生CSS嵌套：确认目标用户使用的浏览器版本满足Chrome 112+、Safari 16.5+、Firefox 117+的要求，同时更新IDE的CSS语法校验插件版本，开启原生CSS嵌套支持后即可直接运行嵌套写法的代码。

无构建流程的纯静态HTML项目优先选择方案1，不需要额外配置，改造成本最低。

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