为啥嵌套 CSS 选择器是自下而上应用的？ [复制]

Posted 2023-02-21

【中文标题】为啥嵌套 CSS 选择器是自下而上应用的？ [复制]

【英文标题】：Why is nested CSS selector applied from bottom-up? [duplicate]为什么嵌套 CSS 选择器是自下而上应用的？ [复制]

【发布时间】：2013-12-06 12:44:14

【问题描述】：

我了解在嵌套 CSS 规则中，选择器从最嵌套的规则开始应用，自下而上。例如以下：

.foo > .bar .baz
  ...

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

【参考方案1】：

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

无论是自上而下还是自下而上遍历都比不遍历效率低。

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

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

【讨论】：

非常感谢您的解释，我一直在想这个问题。