CSS 选择器在哪个方向进行验证？答案

【问题标题】：In which direction are CSS selectors validated?CSS 选择器在哪个方向进行验证？
【发布时间】：2011-01-20 14:02:34
【问题描述】：

我记得不久前在网上观看了一段视频，该视频是 Yahoo 工程师的一次演讲，其中他提到 CSS 选择器是由浏览器从右到左而不是从左到右读取的。意思是 #body .header .links a 实际上会拉出页面上的所有锚点，过滤那些父类为 links 的锚点，这些锚点的父类为 header 类的父类，其父类的 id 为 body。

我找不到视频，想知道是否有人有任何参考资料来加强这一点，还是不正确？这不是说像#body .header .links li a 这样的东西实际上比说#body .links a 慢吗？假设两者都在给定页面上工作。

【问题讨论】：

它们通常从右到左进行评估。请参阅有关细节的最新问题：stackoverflow.com/questions/5797014/…

标签： css optimization css-selectors

【解决方案1】：

当浏览器匹配 css 选择器时，它会检查每个规则是否适用于特定元素。因此，从右到左验证选择器是很自然的。

要检查选择器#body .header .links a 是否匹配元素，它首先检查它是否是a 元素，然后检查是否存在类links 的父元素，然后该元素是否具有类@ 的父元素987654324@，那么如果该元素的父元素的 id 为 body。

【讨论】：

【解决方案2】：

我认为这篇博文朝着这个方向发展：Simplifying CSS Selectors

优化 CSS 选择器的关键是关注最右边的选择器，也称为键选择器（巧合？）。这是一个更昂贵的选择器：A.class0007 * {}。虽然这个选择器可能看起来更简单，但浏览器匹配的成本更高。因为浏览器从右向左移动，它首先检查与键选择器“*”匹配的所有元素。这意味着浏览器必须尝试将此选择器与页面中的所有元素进行匹配。此图表显示了使用此通用选择器的测试页与之前的后代选择器测试页相比的加载时间差异。

我还没有详细阅读它（它是作为推荐给我的）但它看起来非常好。

【讨论】：