html - CSS中选择器的速度/冗余

Question

有人知道 CSS 中的浏览器选择器速度吗？换句话说，不同的选择器如何相互比较（在同一浏览器中）。

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

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

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

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

Answer 1

这是我快速搜索后得到的一些信息。

Answer 2

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

#content #elem {color: black;} 

和

#elem {color: red;}

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

Answer 3

老实说，你说的时间太短了，我认为这并没有什么不同。

在使用更具体的选择器方面 - 我认为这是一个很好的做法，原因有几个：

1. 它增强了代码的可读性 - 一眼就能看到更多选择器相对于 HTML 的应用位置。
2. 它减少了您的选择器在其他地方被覆盖的可能性，因为将编写一个更具体的选择器，这不太可能发生。

在使用诸如 jQuery 之类的 JavaScript 库时，您所说的可能会有所不同——因为它们必须自己解析整个文档，但我自己当然从未注意到任何速度差异。

Answer 4

不是一个聪明人，但你写这个问题所花费的时间可能超过了所有访问你网站的用户所节省的时间总和（相对于#id #id2 与 #id2）。写这个答案的时间也是如此......

你现在可以投票给我了:)

Answer 5

Mozilla 的指导方针可能很有趣。

Answer 6

1. 在效率和可读性之间总是有一些选择。当然table tr td .class是最易读的，但效率很低，可以简化——你有没有在任何地方看到过（假设有效标记）tr没有table或td没有tr？至少您可以评论多余的部分，例如：

   /* table tr */ td .class {
       color: #ccf;
   }
   

2. 有时正如其他人提到的那样，您需要额外的特异性，例如，#elem除非在特定上下文中，否则您应该在任何地方都是红色的#content。

   #elem {
       /* usually red */
       color: red;
   }
   
   #content #elem {
       /* except when in specific context */
       color: black;
   }