使用:has伪类时为何出现解析错误？

你遇到的错误是W3C CSS验证工具的兼容性滞后问题，不是代码本身写错了。:has()属于CSS选择器 Level 4的新特性，目前W3C验证服务还没完全适配这个新标准，所以会误报括号相关的解析错误，但现代主流浏览器（Chrome、Firefox、Safari等）已经支持该选择器，因此你的代码功能不受影响。

给你两个处理方向：

• 若必须通过W3C验证，可临时注释掉:has()相关代码，但没必要为了验证牺牲实际功能；
• 直接忽略这个错误即可，只要目标用户使用的浏览器支持:has()，代码就能正常运行。

你的代码如下：

footer:has(.footer-cards:hover) 
{
  overflow-y: visible;
}

.footer-cards {
  height: 400px;
  background: #062e67;
  padding-inline: 20px;
  border-radius: 10px;
}

.footer {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

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