爲什麼從下往上應用嵌套的CSS選擇器？

Question

我明白，在嵌套CSS規則中，選擇器是從最嵌套的應用程序，自下而上。例如，在以下情況：

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

.baz元素從頁面選擇，則它被限制爲那些的.bar後代，然後它被限制爲那些的.foo兒童的。它爲什麼這樣工作？我讀到這導致了嵌套CSS規則的低效率。在大多數情況下，我認爲自上而下的限制會更有效率。

Answer 1

最有效的選擇器不需要遍歷 - 它只會適用於所討論的元素。

無論您是從上到下還是從下往上，它都會比沒有遍歷效率更高。

自下而上比自上而下效率更高，因爲您只能遍歷選擇器匹配的位置 - 因此，如果當前元素不是.baz，則不需要執行任何操作。如果是.baz，則檢查祖先的.bar，然後重複，直到您遇到條件失敗或匹配所有選擇器。

此外，您正試圖解決是否將樣式應用於元素，以便您有一個元素並確定匹配樣式。如果你自上而下進行工作，那麼你將開始進行分歧匹配，而不是收斂匹配，即如果你從.foo開始，你可能會在風格規則的右側找到選擇器的很多匹配 - 所以你最終會得到匹配元素的樹去檢查。