CSS验证出现Parse Error求助：媒体查询嵌套样式解析报错

你遇到的问题出在CSS嵌套语法的兼容性上：你写的footer内部嵌套a选择器的写法，属于CSS预处理器（比如Sass、Less）或者CSS Nesting新规范的语法，但普通原生CSS验证器并不支持这种写法，所以会抛出Parse Error。

要保留预期效果同时解决解析错误，只需要把嵌套写法改成原生CSS支持的后代选择器即可：

@media (max-width: 600px) {
  footer {
    flex-direction: column;
    gap: 12px;
  }

  footer a {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
}

如果你的项目原本是依赖预处理器编译CSS的，那得检查下编译配置是否正常——比如是不是没开启预处理器编译，直接把预处理器代码丢去原生CSS验证了，这种情况也会触发解析错误。

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