CSS 为何不支持父选择器

解释 CSS 不支持父选择器和前兄弟选择器的原因

问题

为什么 CSS 不支持父选择器？为什么相邻兄弟选择器只能选择后面的元素？

这两个问题的答案本质上是相同的，都与浏览器的渲染机制有关。

浏览器解析 HTML 文档是从前往后、由外及里的。这就是为什么我们经常看到页面先显示头部，然后主体内容逐步出现。这种渲染方式允许浏览器加载多少就渲染多少，提升了页面的可访问性。

如果 CSS 支持父选择器，浏览器必须等待所有子元素加载完毕后才能渲染 HTML 文档。因为父选择器意味着后代元素会影响祖先元素的样式，如果后代元素还没加载，就无法确定祖先元素的最终样式。

这会导致两个严重问题：

问题一：渲染延迟 整个页面会出现长时间白屏，用户体验极差。即使部分内容已经加载完成，也无法显示。

问题二：样式闪烁 如果采用”加载到哪里渲染到哪里”的策略，会出现父元素样式突然改变的情况。比如加载到子元素时，父元素的样式突然从 A 变成 B，视觉体验非常糟糕。

以阅读文章为例，只要文章内容加载出来，用户就可以开始阅读，即使后面的广告脚本阻塞了后续加载。但如果支持父选择器，整个文档必须完全加载才能显示，页面可访问性会大大降低。

相邻选择器只能选择后面的元素，也是同样的道理。后面的 HTML 不可能影响已经渲染的前面元素的样式。

从技术实现角度看，支持父选择器并非不可能，但 CSS 和 HTML 的渲染机制决定了这不是一个好的设计。除非未来网速快到可以忽略加载时间，否则支持父选择器的可能性很低。