为何无法在简单类选择器规则中直接嵌套类型选择器规则？

你的写法本身符合CSS嵌套规则，VSCode提示错误主要有两个核心原因：

1. 原生CSS嵌套的支持滞后 #

你看到的W3示例是原生CSS嵌套的标准写法，但原生CSS嵌套是较新的特性（截至2024年，仅Chrome 112+、Firefox 113+等现代浏览器原生支持），而VSCode默认的CSS语法检查工具还没完全适配这个新标准，所以会误判为语法错误。

2. 预处理器与原生CSS的解析差异 #

如果是用Sass/Less这类预处理器写嵌套，你的代码完全没问题，但VSCode默认会把.css文件当成标准CSS解析——而标准CSS直到近年才正式支持嵌套语法，因此会抛出} expected的错误提示。

解决办法 #

方案一：切换到CSS预处理器 #

把文件后缀改成.scss（Sass）或.less，VSCode会自动识别预处理器语法，错误提示立刻消失，之后通过编译工具（比如Dart Sass、Less.js）把预处理器代码转换成标准CSS即可。

方案二：开启原生CSS嵌套支持 #

如果想直接用原生CSS：

• 确认目标浏览器支持原生CSS嵌套；
• 在VSCode中安装PostCSS Language Support插件，配置PostCSS使用postcss-nesting插件处理嵌套语法；或者在VSCode设置里搜索css.validate，调整相关规则忽略原生嵌套的语法误报。

补充：原生CSS嵌套要求嵌套选择器必须是相对选择器（以&、>、+等开头），你的& > h1写法完全符合规则，只是工具链的支持没跟上而已。

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