按CSS嵌套模块编写代码时W3C验证出现解析错误的原因与解决办法

错误原因 #

W3C CSS验证服务对原生CSS嵌套规范的支持还没完全跟上，而且原生CSS嵌套强制要求嵌套选择器前必须添加&符号——你写的代码里直接嵌套.bar，省略了&，既不符合原生CSS嵌套的标准语法，也会让验证工具把它识别为无效代码，从而抛出解析错误。（注：Sass/Less这类预处理器允许省略&，但原生CSS嵌套不支持这种宽松写法）

解决办法 #

有两种可行的方式：

• 修正为符合原生规范的写法：在嵌套的.bar前加上&，代码修改后如下：

.foo {
  color: red;

  & .bar {
    color: blue;
  }
}

这种写法完全符合CSS Nesting Module的标准，能被W3C验证服务正确识别。

• 编译为传统CSS语法：如果是用预处理器写的嵌套代码，先编译成非嵌套的传统CSS再验证，编译后的代码如下：

.foo {
  color: red;
}
.foo .bar {
  color: blue;
}

传统CSS语法是验证服务完全支持的，不会报错。

内容的提问来源于stack exchange，提问作者정인영