CSS选择器前的{}.是什么含义？为何能在Chrome中生效？

这个问题挺有意思的！其实核心原因是浏览器的CSS解析器自带错误恢复机制——当遇到不符合标准语法的代码时，它们不会直接停止解析整个样式表，而是会尝试跳过无效部分，继续处理后面的有效代码。

咱们具体拆解你提到的这段代码：

{}.foo { color: red }

• 首先，{}是一个没有前置选择器的孤立声明块，这完全不符合标准CSS的语法结构（标准要求是「选择器 + 声明块」的组合）。
• Chrome的解析器会把这个孤立的{}判定为无效语法，直接忽略掉它，然后继续解析后面的.foo { color: red }——这部分是完全符合标准的选择器+声明块，所以就能正常生效，给对应元素加上红色文字样式。

再看你给出的示例代码：

h1 { color: #f00; } {}.ll { color: green; }

浏览器会跳过中间无效的{}，正常解析h1和.ll的样式规则，所以页面里的<h1>会显示红色，<p class="ll">会显示绿色。

不过要特别提醒：这种写法完全依赖浏览器的错误容错逻辑，不是标准CSS语法，其他浏览器（比如旧版本IE）可能不会兼容，而且可读性极差，绝对不要在生产代码里使用这种写法哦！

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