谷歌浏览器Chrome 123中如何开启并测试全新的CSS嵌套语法功能？

要在Chrome 123中使用原生CSS嵌套语法，须先启用chrome://flags中的CSS Nesting实验标志并重启浏览器，再用@nest语法编写样式，最后通过CSS.supports('nesting', 'true')验证是否生效。

要在Chrome 123中实际使用原生CSS嵌套语法，必须先确认浏览器已启用CSS Nesting实验标志，再用符合规范的@nest语法编写样式，并通过JavaScript运行时检测验证是否真正生效。

确认Chrome版本并启用CSS Nesting标志

打开Chrome浏览器右上角菜单→帮助→关于Google Chrome，检查当前版本号。若显示为123.x.x.x，则无需升级；若低于123，需等待自动更新或手动下载安装包覆盖安装。

在地址栏输入chrome://flags并回车，页面加载完成后，在顶部搜索框中精确输入CSS Nesting（注意大小写与空格）。

找到状态为Default或Disabled的“CSS Nesting”条目，点击其右侧下拉箭头，选择Enabled。这一步【必须重启浏览器才生效】，否则后续所有测试均为无效。

立即学习“前端免费学习笔记（深入）”；

点击页面右下角的Relaunch按钮，等待Chrome完全关闭并重新启动。

用正确语法编写可识别的嵌套规则

方法一：直接使用@nest包裹子规则（推荐，兼容性最稳）

新建一个HTML文件，在