W3校验CSS报314行解析错误、VSCode提示缺右花括号问题求助

问题根源 #

你的CSS代码存在媒体查询嵌套后未完全闭合的语法错误：

• 你共嵌套了3层@media查询：min-width:768px、min-width:992px、min-width:1200px
• 每层媒体查询开启时都写了左花括号{，但最终都没有对应的右花括号}闭合，累计缺失3个右花括号，所以仅手动添加1个无法通过校验。

修复方案 #

直接在你当前CSS代码的最末尾，追加3个右花括号即可，修正后的末尾代码段如下：

.footer-links a .fas{
                display: inline-block;
            }
        } /* 闭合min-width:1200px的媒体查询 */
    } /* 闭合min-width:992px的媒体查询 */
} /* 闭合min-width:768px的媒体查询 */

额外兼容提示 #

原生CSS的媒体查询嵌套属于较新的CSS Nesting特性，低版本浏览器不支持。如果需要兼容旧版浏览器，建议将3层嵌套的媒体查询拆分为平级的独立媒体查询写法。

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