Chrome 119+稳定支持原生CSS嵌套，需显式使用@nest包裹&选择器（如.test-container { @nest & h2 { color: red; } }），低于119需在chrome://flags启用CSS Nesting实验标志，并用CSS.supports('nesting', 'true')检测实际支持性。
如果您在Chrome浏览器中尝试使用原生CSS嵌套语法（CSS Nesting），但样式规则未被解析或应用，则可能是由于实验性功能未启用、浏览器版本过低、或嵌套语法未按规范显式声明。以下是开启并验证CSS Nesting实验性支持的具体步骤：
一、确认并升级Chrome至支持版本
CSS Nesting在Chrome 112起进入实验阶段，116版默认启用部分能力，但完整稳定支持需Chrome 119及以上版本。低于119的版本必须通过chrome://flags手动启用，且部分嵌套特性（如@nest块）仅在119+中可靠生效。
1、在地址栏输入 chrome://version 并回车，查看当前版本号。
2、若版本低于119，访问 https://www.google.com/chrome/ 下载并安装最新稳定版。
立即学习“前端免费学习笔记（深入）”；
3、重启浏览器后再次检查版本信息，确保显示为 119.0 或更高。
二、在chrome://flags中启用CSS Nesting实验标志
即使版本≥119，部分环境（如企业策略限制或特定构建）仍可能禁用该功能。需手动激活实验性标志以确保兼容性测试环境完整。
1、在地址栏输入 chrome://flags 并回车。
2、在页面顶部搜索框中输入 CSS Nesting。
3、找到名为 CSS Nesting 的条目（状态显示为 “Default” 或 “Disabled”）。
4、点击右侧下拉菜单，选择 Enabled。
5、滚动至页面底部，点击 Relaunch 按钮强制重启浏览器。
三、使用@nest语法编写可验证的嵌套规则
Chrome 119+稳定支持显式@nest语法，该语法是唯一被规范要求且静默失效风险最低的嵌套形式。直接使用&前缀嵌套（如.card { & h2 {…} }）在部分119–118版本中仍可能被忽略，必须包裹于@nest块内。
1、新建HTML文件，内联
2、编写如下验证代码：
.test-container { background: #eee; @nest & h2 { color: red; font-size: 1.5em; } @nest & > p { margin: 0.5rem 0; } }
3、在HTML中插入对应结构： 段落标题
4、刷新页面，检查h2与p是否正确应用样式。
四、运行时检测CSS Nesting支持性
避免依赖版本号判断，应通过JavaScript执行规范级检测，确认浏览器实际解析能力。CSS.supports('nesting', 'true')是W3C标准检测方式，返回布尔值，可嵌入调试逻辑。
1、打开开发者工具（F12），切换至Console面板。
2、输入并执行：CSS.supports('nesting', 'true')。
3、若返回 true，表示当前会话已成功启用嵌套解析；若返回 false，说明flags未生效或存在策略拦截。
4、可进一步验证嵌套是否被识别：在Elements面板中定位.test-container元素，查看Styles侧栏是否展开@nest & h2子规则——若仅显示扁平化规则（如.test-container h2），则嵌套未被解析。
五、禁用预处理器干扰并清理缓存
开发环境中若同时存在Sass/Less构建流程或缓存旧CSS文件，会导致浏览器加载编译后代码而非原始嵌套CSS，造成“语法正确却无效”的假象。
1、临时关闭Webpack/Vite等构建工具的CSS预处理插件（如sass-loader、less-loader）。
2、确保HTML中引用的是未经编译的原始.css文件，路径不含.css?v=xxx等缓存参数。
3、在Network面板中筛选CSS资源，确认响应头中Content-Type为text/css，且响应体包含@nest或&符号。
4、强制刷新页面（Ctrl+F5 或 Cmd+Shift+R），清除内存与磁盘缓存。
