CSS中选择器的速度/冗余

Question

有没有人有关于CSS浏览器选择器速度的信息？换句话说，不同的选择器如何相互比较（在同一浏览器中）。

例如，我经常看到（并编写）这样的代码：

#content #elem { ...rules... }

但由于这些元素是唯一的ID，我应该只需要#elem，对吗？这让我想到浏览器是否可能更快地拥有更复杂的选择器 - 我的想法是浏览器可能会找到#content并知道只查看该元素，而不是其他地方。

另一个例子可能是table tr td .class vs table .class

Answer 1

Here是我在快速搜索后获得的一些信息。

Answer 2

速度可能存在差异，但在任何正常使用情况下都无法察觉。写这样的CSS的真正原因是特异性。那就是你有

#content #elem {color: black;} 

和

#elem {color: red;}

元素应该是黑色的，因为这是更具体的规则。

Answer 3

说实话，你谈的是这么短的时间，我觉得它确实没什么区别。

在使用更具体的选择器方面 - 我认为这是一个好习惯，原因有两个：

1. 它增强了代码的可读性 - 一目了然，您可以看到更多关于HTML应用程序的应用程序。
2. 它减少了你的选择器在其他地方被覆盖的可能性，因为一个具有更多特定性的选择器将被写入，这是不太可能发生的。

你所说的可能在使用jQuery这样的JavaScript库时会有所作为 - 因为他们必须自己解析整个文档，但我自己从未注意到任何速度差异。

Answer 4

不是一个聪明人，但是你写这个问题的时间可能超过了所有访问你网站的用户的所有时间节省的总和（与#id＃id2 vs＃id2相关） 。那么写这个答案的时间到了....

你现在可以投票给我了：）

Answer 5

Mozilla's guidelines可能很有趣。

Answer 6

1. 在效率和可读性之间总有一些选择。当然table tr td .class最具可读性，但效率非常低且可以简化 - 您是否在没有tr或table的情况下看到任何地方（假设有效标记）td而没有{{1} }}？至少你可以评论冗余部分，如：

   tr

2. 有时候其他人提到你需要额外的特异性，例如：除/* table tr */ td .class { color: #ccf; } 。

   的具体情况外，您的#elem应该是红色的

   #content