验证CSS选择器的方向是什么？

Question

我记得有一段时间在网上观看视频，这是雅虎工程师的一次演讲，他提到了浏览器从右到左阅读CSS选择器，而不是从左到右。含义#body .header .links a实际上会拉出页面上的所有锚点，过滤那些父类为links的父级，其父级为header，父级的父级为body。

我找不到视频，并且想知道是否有人提及加强这个或是不正确？这是否意味着#body .header .links li a之类的内容实际上比仅仅#body .links a更慢？假设两者都在给定页面上工作。

Answer 1

我认为这篇博客文章涉及这个方向：Simplifying CSS Selectors

  

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

我还没有详细阅读（作为推荐来到我这里），但它看起来非常好。

Answer 2

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

要检查选择器#body .header .links a是否与元素匹配，它首先检查它是否为a元素，然后如果父类具有类links，则该元素是否具有如果该元素的父级ID为header，则该级别为body的父级。