CSS多個子選擇器vs單標籤選擇器性能

理論上CSS子選擇器比標籤選擇器更高效。但是當你有一個類時你會發生什麼，你需要在這個類元素裏面定義一個特定的標籤，但他們不是一級的孩子？CSS多個子選擇器vs單標籤選擇器性能

讓我們看一個例子：

.styled-table > tbody > tr > td{ 
    // Some cell styles 
}

.styled-table td{ 
    // Some cell styles 
}

哪一個是更好的CSS性能的做法？

「但是當你有一個班級，你需要在這個班級元素裏面設置一個特定的標籤但是他們不是一個一級孩子時會發生什麼？」然後表現變得完全不相關。 – BoltClock

CSS由解釋器從右向左讀取，較短的選擇器===更多的性能。 –

~~每MDN：避免後代選擇〜~~

的後代選擇在CSS中最昂貴的選擇。這是可怕昂貴 - 尤其是如果選擇器在標籤或通用類別。

如果你認爲它通過在邏輯上，與後代選擇，在CSS引擎將檢查父元素的每個孩子（在這種情況下.styled-table）尋找匹配（在這種情況下td標籤），然後將每個這些孩子的孩子等等。

然而，使用一個子選擇器，您正在告訴引擎確切要找出匹配的「路徑」。如果它在路徑中的任何點無法找到匹配項（例如，如果您的.styled-table沒有tbody作爲其直接子項），那麼它將放棄選擇器。

2016-04-27 15:30:12 Shaggy

您發佈到MDN文檔報告的鏈接還指出，這些準則是在2000年編寫的，並且可能不再與現代瀏覽器相關。 – fbid

糟糕，我知道，但當它在Google上彈出時，它的日期爲2016年1月15日，所以我認爲它已更新。多一點谷歌搜索顯示，相對於其他選擇器，兩個選擇器的性能仍然很差，並且子選擇器比後代選擇器執行得更好。 – Shaggy

回答