css选择器引擎的具体实现答案

【问题标题】：specific implementations of css selector enginescss选择器引擎的具体实现
【发布时间】：2011-10-09 05:15:58
【问题描述】：

众所周知，过度使用 id css 规则被认为是一种不好的做法。有很多关于这个主题的帖子 - 例如，这是latest 中的一个。

在此类帖子中，经常提到 css 选择器实际上是由浏览器引擎从右到左解析的。也就是说，如果我们有选择器#very div，那么浏览器首先查找所有 div，然后测试它们是否有具有此 id 的父级。

我的问题由两个相关的部分组成。第一部分 - 这是真的吗？有很多 css 引擎的实现，包括开源的和专有的，如果有人对这些引擎有所了解，能阐明这个主题，那就太好了。

问题的第二部分是 - 如果它是真的，如果我们真的总是从右到左解析 css 规则，我们为什么要这样做？我根本不是解析专家，但是定义选择器的哪个部分更具体（产生更少的输出）并不一定从右边开始过滤不是更方便吗？是不是太贵了？

【问题讨论】：

嗯，不，#very div 找到 divs 并在他们的文档树中搜索 ID 为“very”的元素。
@BoltClock 你到底在说什么 css 引擎/引擎？此外，还有问题的第二部分）
我的意思是，您将div#very 与#very div 混淆了。
相关：stackoverflow.com/questions/5797014/… 和 stackoverflow.com/questions/3851635/css-combinator-precedence
@BoltClock 哦，我明白了。不，实际上，我不是，但我已经编辑了我的问题以更清楚。

【解决方案1】：

Seteve Sounders 不久前做过some tests，虽然他的测试证实了这一点（至少对于经过测试的浏览器而言），但它也显示了性能提升的规模。对于 6000 个 dom 元素，使用类与后代的最大性能提升为 200 毫秒（非常显着），而平均值要小得多（而且显着性较低）。

该测试还表明，虽然浏览器和引擎之间存在差异（有趣的是，性能最好），但趋势是相同的。

【讨论】：