使用W3C校验工具出现CSS解析错误，求解决方法

错误原因 #

W3C的CSS校验器对CSS Selectors Level 4标准中的:has()选择器支持不完善，它无法正确识别:has()内部的选择器结构，因此误抛出了解析错误。实际上你的CSS语法在现代浏览器中是完全合法且可正常运行的。

修复方案 #

方案一：用类名替代:has()（适配W3C校验）

如果必须通过W3C校验，可以借助JavaScript给符合条件的元素添加类名，再用类选择器编写样式：

JavaScript代码：

// 给包含.quick__modal的body添加类
document.querySelectorAll('body:has(.quick__modal)').forEach(el => el.classList.add('body-modal-active'));
// 给包含ul li的.queries-item添加类
document.querySelectorAll('.queries-item:has(ul li)').forEach(el => el.classList.add('has-sub-list'));

修改后的CSS：

.body-modal-active {
  overflow: hidden;
}
.queries-item:not(.has-sub-list):hover {
  border-radius: 4px;
  background-color: #e8e9eb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.queries-group .queries-item {
  padding: 0;
}
.queries-group .queries-item.has-sub-list ul {
  background: #f8f8f8;
}

方案二：忽略校验器误报（优先推荐，若兼容现代浏览器）

:has()选择器已经被Chrome 105+、Firefox 121+、Safari 15.4+等现代浏览器全面支持。如果你的项目目标浏览器覆盖这些版本，完全可以忽略W3C校验器的报错——这只是校验器自身对新CSS标准支持滞后导致的问题，你的代码本身没有语法错误。

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