CSS 解析

CSS 解析把样式表里的文字转成一组可用规则，浏览器按这些规则决定每个元素怎么显示^[1]。做 SEO 的人关心它，原因有两个：样式决定内容是否可见，而样式表没解析完，页面就不会开始渲染。看这一篇要抓住两件事，解析器会跳过看不懂的规则，以及样式会阻塞渲染。

从文本到样式规则

CSS 解析先做标记化，再做规则解析。CSS 语法规范写明，这一过程的输入是一串字节，输出是一份有意义的样式表^[1]。

规则由选择器和声明块组成。选择器说明作用于哪些元素，声明块里的属性与值说明怎么显示^[2]。

浏览器再把这些规则与文档树结合。DOM 提供内容，CSSOM 提供样式，两棵树合并成渲染树^[3]。

跳过与容错

解析器遇到看不懂的部分会跳过。CSS 语法规范把这种设计写得很直接：出错时解析器尽量恢复，只丢弃最少的内容，之后继续解析^[1]。

设计成这样的原因也写在规范里。新语法对旧解析器来说看起来就是错误，保留容错才能让含它的样式表不至于整份失效^[1]。

无效的值会丢一条声明。属性值对某个属性不合法时，这条声明被判为无效，整个声明被忽略^[2]。

选择器出错时波及范围更大。一组选择器里只要有一个无效，整条规则都会被忽略^[2]。

样式阻塞渲染

CSS 是阻塞渲染的资源。浏览器要等到样式表下载并处理完，才开始渲染页面^[3]。

阻塞的原因和层叠有关。后面的规则可能覆盖前面的规则，样式没算完就画，画面会先错再改^[3]。

样式还会挡住脚本。等待样式表不会暂停 HTML 解析，但会阻塞 JavaScript，因为脚本常要读取元素的样式^[4]。

对抓取与收录的影响

收录关注的是内容能不能被读到，这一层和样式关系不大。正文写在 HTML 里，样式表加载失败也只是显示难看^[3]。

用样式藏内容会改变判断。display: none 隐藏的文本，用户看不到，引擎也不会把它当正常正文处理^[3]。

visibility: hidden 表现不一样。元素仍占位置，仍会进入渲染树^[4]。

爬虫侧的资源缓存也要留意。Google 说明抓取工具会主动缓存资源，并可能忽略缓存标头，旧的 CSS 因此可能被继续使用^[5]。

百度把收录概括为抓取网页、建立索引数据库，再把库里的数据展现给用户^[6]。样式不改变这三个环节，只决定内容以什么方式呈现。

常见误用

• 用 display: none 塞关键词，指望用户看不到、引擎却能读到。
• 关键内容先隐藏、再由脚本显示，脚本一失败内容就消失。
• 阻塞样式表堆在 <head> 顶部，首屏被拖慢。
• 依赖浏览器容错写无效属性，以为它一定会自动纠正。

附录

参见

• HTML 解析
• 渲染管线
• 解析错误

参考资料

官方（境外）

1. 《CSS Syntax Module Level 3》，W3C CSS 工作组，2025-07-09。
2. 《语法》，MDN Web 文档，2026-04-10 更新。
3. 《关键渲染路径》，MDN Web 文档。
4. 《渲染页面：浏览器的工作原理》，MDN Web 文档，2025-11-10 更新。
5. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。

官方（国内）

6. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

外部链接

无。