Css 选择器引擎的读数到底是哪个方向？

我一直相信（尽管我现在怀疑这些信念的有效性）：

快于：

.name

然而，我最近读到，大多数CSS选择器引擎从右向左读取，在这种情况下，第一个示例实际上不会更慢吗？因为选择器引擎将简单地查找具有名称类的每个元素，然后必须识别哪些元素是

div

s

---

CSS选择器引擎通常以哪种方式读取？从左到右还是从右到左？如果他们通常从右向左阅读，有人能给我解释一下为什么（我看不出从右向左阅读对于选择器引擎有什么意义）？

选择器引擎不寻找应用规则的元素，而是寻找应用于特定元素的规则。因此，从右向左读取选择器是有意义的

这样的选择器：

div span.text a.demo

将使选择器引擎执行以下检查，以查看选择器是否应用于元素：

• 它是一个带有类

  demo

  的

  a

  元素吗
• 它是否有一个祖先是类为text的

  span

  元素
• 该元素是否有一个祖先是

  div

  元素

然而，我最近读到，大多数CSS选择器引擎从右向左读取，在这种情况下，第一个示例实际上不会更慢吗

CSS选择器引擎一般以哪种方式读取？从左到右还是从右到左？如果他们通常从右向左阅读，有人能给我解释一下原因吗（我看不出从右向左阅读选择引擎有什么意义）

坦白地说，几乎不可能知道在给定的浏览器中哪个选择器速度较慢，更不用说跨浏览器了。性能往往会波动且不可预测，尤其是在这种微观规模和不可预测的文档结构下。即使我们谈论理论性能，它最终也取决于实现

如上所述，如中和中所示，一个典型的浏览器（目前所有主要布局引擎都是如此）会获取一个元素并计算所有候选选择器，以查看它匹配的是哪些选择器，而不是查找与给定选择器匹配的一组元素。这是一个微妙但非常重要的区别。Boris提供的技术解释不仅非常详细，而且非常权威（因为他在Firefox使用的引擎Gecko上工作），所以我强烈建议阅读它

但我想我应该谈谈你问题中的另一个问题：

因为选择器引擎将简单地查找具有名称类的每个元素，然后必须识别哪些元素是

div

s

以及：

---

链接的问题解释了为什么选择器通常是从右向左读取的，所以当前的

#foo ul.round.fancy li.current

是从

li.current，ul.round.fancy，#foo

读取的，但是在每个元素（

.current，li，.fancy，.round，ul，#foo

）中它真的是从右向左读取的吗？应该是吗

我从未实现过CSS，也没有见过其他浏览器如何实现它。从上面链接的答案中我们知道，浏览器使用从右到左的匹配来遍历选择器中的组合符，例如本例中的

组合符：

section>div.second>div.third

如果一个元素不是

div.third

，那么它的父元素是否是

div.second

，其父元素是否是

节，就没有点检查

然而，我不相信这种从右到左的顺序会一直钻到简单的选择器级别。换句话说，我不认为浏览器对一个简单选择器序列（也称为复合选择器）的每一部分都使用从右到左的求值，在一系列由组合符分隔的复合选择器中使用从右到左的求值

例如，考虑这种设计和高度夸张的选择器：
div.name[data foo=“bar”]：第n个子项（5）：悬停：：之后

现在，不能保证浏览器一定会按以下顺序检查元素的这些条件：

指针是否在该元素上
这个元素是其父元素的第五个子元素吗
此元素是否具有值为条形的
数据foo
属性
此元素是否有
名称
类

这是
div
元素吗
除简单选择器混乱外，该选择器在功能上与上述选择器相同，也不必按以下顺序进行评估：

div:hover[data foo=“bar]”。名称：第n个子项（5）：：之后

这个元素是其父元素的第五个子元素吗
此元素是否有
名称
类

此元素是否具有值为条形的
数据foo
属性
指针是否在该元素上
这是
div
元素吗
根本没有理由因为性能原因而执行这样的命令。事实上，我认为通过先选择某些类型的简单选择器，无论它们在序列中的什么位置，性能都会得到提高。（您还将注意到，
：：after
未被考虑，这是因为伪元素不是简单的选择器，甚至从未进入匹配等式。）

例如，众所周知，ID选择器是最快的。鲍里斯在回答相关问题的最后一段说：

还请注意，浏览器已经进行了其他优化，以避免尝试匹配肯定不匹配的规则。例如，如果最右边的选择器有一个id，而该id与元素的id不匹配，则不会尝试匹配该选择器
div span.text a.demo