css - 为什么嵌套 CSS 选择器是自下而上应用的？

Question

据我了解，在嵌套 CSS 规则中，选择器是从最嵌套的选择器应用的，自下而上。例如以下内容:

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

.baz从页面中选择元素，然后将其限制为 .bar 的后代元素，那么它仅限于 .foo 的子级。 。为什么会这样？我读到这会导致嵌套 CSS 规则效率低下。大多数情况下，我认为自上而下的限制会更有效。

Answer 1

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

无论是从上往下遍历还是从下往上遍历，都会比不遍历效率低。

自下而上比自上而下更有效，因为您只遍历选择器匹配的位置 - 因此如果当前元素不是 .baz 则无需执行任何操作。如果它是 .baz，则检查 .bar 的祖先并重复，直到满足条件或匹配所有选择器为止。

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