CSS 为何不支持父选择器
解释 CSS 不支持父选择器和前兄弟选择器的原因
问题
为什么 CSS 不支持父选择器？为什么相邻兄弟选择器只能选择后面的元素？
解答
这两个问题的答案本质上是相同的，都与浏览器的渲染机制有关。
浏览器的渲染顺序
浏览器解析 HTML 文档是从前往后、由外及里的。这就是为什么我们经常看到页面先显示头部，然后主体内容逐步出现。这种渲染方式允许浏览器加载多少就渲染多少，提升了页面的可访问性。
父选择器的问题
如果 CSS 支持父选择器，浏览器必须等待所有子元素加载完毕后才能渲染 HTML 文档。因为父选择器意味着后代元素会影响祖先元素的样式，如果后代元素还没加载，就无法确定祖先元素的最终样式。
这会导致两个严重问题：
问题一：渲染延迟 整个页面会出现长时间白屏，用户体验极差。即使部分内容已经加载完成，也无法显示。
问题二：样式闪烁 如果采用”加载到哪里渲染到哪里”的策略，会出现父元素样式突然改变的情况。比如加载到子元素时，父元素的样式突然从 A 变成 B，视觉体验非常糟糕。
实际场景
以阅读文章为例，只要文章内容加载出来，用户就可以开始阅读，即使后面的广告脚本阻塞了后续加载。但如果支持父选择器，整个文档必须完全加载才能显示，页面可访问性会大大降低。
前兄弟选择器同理
相邻选择器只能选择后面的元素，也是同样的道理。后面的 HTML 不可能影响已经渲染的前面元素的样式。
未来可能性
从技术实现角度看，支持父选择器并非不可能，但 CSS 和 HTML 的渲染机制决定了这不是一个好的设计。除非未来网速快到可以忽略加载时间，否则支持父选择器的可能性很低。
关键点
- 浏览器从前往后、由外及里解析 HTML，边加载边渲染
- 父选择器需要等待所有子元素加载完才能确定样式，会导致长时间白屏
- 渐进式渲染会造成父元素样式突变，用户体验差
- 前兄弟选择器的限制原因相同，后面的元素不能影响前面已渲染的元素
- 这是渲染机制的限制，而非技术实现的限制
目录