Question

据我所知，在嵌套的CSS规则中，选择器是从最嵌套的应用程序中应用的，自下而上。例如，如下所示：

.foo > .bar .baz{
  ...
}

从页面中选择

.baz元素，然后将其限制为.bar的后代，然后将其限制为.foo的子元素。为什么这样工作？我读到这导致嵌套CSS规则效率低下。在大多数情况下，我认为自上而下的限制会更有效率。

Answer 1

最有效的选择器不需要遍历 - 它只会应用于相关元素。

无论您是从上到下还是从下往上遍历，它都会比没有遍历效率低。

自下而上比自上而下更有效，因为你只遍历选择器匹配的位置 - 所以如果当前元素不是.baz，则不需要再进行任何操作。如果是.baz，则检查祖先是否为.bar并重复，直到您输入条件失败或匹配所有选择器。

此外，您正在尝试确定是否将样式应用于元素，因此您有一个元素并确定匹配的样式。如果你自上而下工作，你将会进行不同的匹配，而不是收敛匹配，即如果你从.foo开始，你可能会在样式规则的右边找到许多匹配选择器 - 所以你最终得到了要检查的匹配元素的树。