最快的CSS選擇器？

鑑於我有一個彈出窗口，ID爲「popup」，並在其中有兩個按鈕，一個在左邊，一個在右邊，類爲「popupbutton」，這些css規則中哪一個最有效：最快的CSS選擇器？

#popup a.popupbutton 

#popup .popupbutton 

a.popupbutton 

.popupbutton

2012-02-09 Wesley

你想要選擇什麼？ – paislee 2012-02-09 19:15:12

Idk如果你需要關心css的速度，你有多少這樣的風格？ – 2012-02-09 19:15:30

甚至不要去想它。 – BoltClock 2012-02-09 19:15:46

.popupbutton

類會更快。但是當你接近它時，你可以節省自己20-50毫秒的時間（這可能會也可能沒有關係）。

有一個相當不錯的測試完成，你可以在多個瀏覽器中的CSS選擇器速度的差異約在這裏，看起來閱讀：http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

在所有瀏覽器的平均增速放緩爲50毫秒，如果我們看一下大的（IE 6 & 7，FF3），平均增量僅爲20毫秒。對於今天70％或更多的用戶來說，改進這些CSS選擇器只能提高20毫秒。

正如您從文章中看到的那樣，選擇器速度的差異非常小，而且這些測試都是針對非常強大的DOM示例。

2012-02-09 19:24:51

同意！選擇大量元素時，CSS選擇器的效率只會影響*。考慮它是一種微型增強，不用擔心。 – 2012-02-09 19:27:53

.popupbutton是最快的選擇，檢查谷歌PageSpeed tips對CSS的渲染

2012-02-09 19:15:38

也許不是因爲你可能會想到的原因。這完全來自於選擇器從右向左應用的事實。 – 2012-02-09 19:17:55

就是這樣，發生在大多數情況下，繼承人更詳細的答案... http://stackoverflow.com/questions/5797014/css-selectors-parsed-right-to-left-why – 2012-02-09 19:26:43

.popupbutton是最快的。
但請記住，a.popupbutton與.popupbutton不一樣。他們大多數時間都會做同樣的事情，但考慮一下這個例外情況：

a:link { color: red; } 
.popupbutton { color: green; } /* Won't work */ 
a.popupbutton { color: green; } /* Will work */

2012-02-09 19:29:00 elclanrs

回答