最快的CSS选择器？

Question

鉴于我有一个弹出窗口，ID为“popup”，其中有两个按钮，一个在左边，一个在右边，有类“popupbutton”，这些css规则中的哪一个最有效：

#popup a.popupbutton

#popup .popupbutton

a.popupbutton

.popupbutton

Answer 1

.popupbutton

课程会更快。但是当你接下来的时候，你会节省20-50ms（这可能或不重要）。

您可以在此处阅读相当不错的测试，了解多个浏览器中css选择器速度的差异：http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

  

所有浏览器的平均减速时间为50毫秒，如果我们查看大型浏览器（IE 6＆amp; 7，FF3），平均增量仅为20毫秒。对于今天70％或更多的用户来说，改进这些CSS选择器只能提高20毫秒。

正如您从文章中看到的那样，选择器速度的差异非常小，而且这些测试反对非常强大的DOM示例。

Answer 2

.popupbutton是最快的选择器，请在CSS渲染上查看Google PageSpeed tips

Answer 3

.popupbutton是最快的 但请注意，a.popupbutton与.popupbutton不同。他们大多数时间会做同样的事情，但考虑这个例外：

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