【发布时间】：2013-12-06 12:44:14
【问题描述】：
我了解在嵌套 CSS 规则中，选择器从最嵌套的规则开始应用，自下而上。例如以下：
.foo > .bar .baz{
...
}
.baz 元素是从页面中选择出来的，然后限制为.bar 的后代元素，然后限制为.foo 的子元素。为什么它会这样工作？我读到这导致嵌套 CSS 规则效率低下。在大多数情况下，我认为自上而下的限制会更有效。
【问题讨论】：
标签： css css-selectors
【发布时间】：2013-12-06 12:44:14
【问题描述】：
最有效的选择器不需要遍历——它只适用于有问题的元素。
无论是自上而下还是自下而上遍历都比不遍历效率低。
自下而上比自上而下更有效，因为您只遍历选择器匹配的位置 - 因此如果当前元素不是 .baz 则无需执行任何其他操作。如果它是 .baz，则检查 .bar 的祖先并重复，直到条件失败或匹配所有选择器。
此外，您正在尝试确定是否将样式应用于元素，因此您有一个元素并确定匹配的样式。如果您自上而下工作，您将致力于发散匹配，而不是收敛匹配，即如果您从 .foo 开始，您可能会在样式规则右侧找到许多匹配选择器 - 所以您最终会得到匹配要检查的元素。
【讨论】：
-
非常感谢您的解释，我一直在想这个问题。