哪种CSS选择器样式更有效？

Question

受Help understanding JQuery Attribute Equals Selector的启发，问题是：

哪一个更有效？

$('#FOO element.BAR[attr=BAZ]')

或

$('#FOO element[attr=BAZ].BAR')

是的，我们可以省略最初的#FOO选择器，但那个问题特别是询问，所以... sobeit

另外，虽然我上面的语法使用jQuery，但这只是因为我这样做很方便。 在CSS文档中可以找到相同的语法，没有？显然是不一样的，让我们把它限制为jQuery呢？

Answer 1

公平quick and dirty demo显示两种方法之间的差异为1-5ms，并且两者之间的差异越大。我想虽然测试可以得到很大改善。

无论如何，超过十次页面加载（所有时间都以毫秒为单位）：

page load     |       $('#foo td.one[title=baz]')     |        $('#foo td[title=baz].one')
--------------+---------------------------------------+---------------------------------------
1             |                 9                     |                    8
2             |                 7                     |                    6
3             |                 8                     |                    8
4             |                 8                     |                    8
5             |                 8                     |                    7
6             |                 8                     |                    8
7             |                 7                     |                   11
8             |                 8                     |                    7
9             |                 7                     |                    7
10            |                 8                     |                    8
--------------+---------------------------------------+----------------------------------------
total         |                78                     |                   78

所以...只要我可以从中得出任何，看来$('#foo td.one[title=baz]') 略微更快，但是，平均来说它们出来了同样的。