有人知道 CSS 中的浏览器选择器速度吗？换句话说，不同选择器之间的比较（在同一浏览器中）。
例如，我经常看到（并编写）这样的代码：
#content #elem { ...rules... }
但由于这些元素是唯一的 ID，我应该只需要 #elem，对吧？这让我开始思考浏览器是否可以更快地拥有更复杂的选择器 - 我的想法是浏览器可能会找到 #content 并且知道只查看该元素，而不是其他地方。
另一个例子可能是table tr td .class vs table .class
【问题讨论】：
标签： html css performance css-selectors
Here 是我快速搜索后得到的一些信息。
【讨论】：
说实话，你说的时间太短了，我认为这并没有什么不同。
在使用更具体的选择器方面 - 我认为这是一种很好的做法，原因有两个：
您所说的可能在使用 jQuery 等 JavaScript 库时会有所不同 - 因为它们必须自己解析整个文档，但我自己当然从未注意到任何速度差异。
【讨论】：
速度可能会有所不同，但在任何正常使用情况下都无法察觉。像这样编写 CSS 的真正原因是特异性。那就是如果你有
#content #elem {color: black;}
和
#elem {color: red;}
元素应该涂成黑色，因为这是更具体的规则。
【讨论】：
不是一个聪明人，但你写这个问题所花费的时间可能超过所有访问你网站的用户所节省的时间总和（相对于#id #id2 与 #id2） .写这个答案的时间也是如此......
你现在可以投票给我了 :)
【讨论】：
Mozilla's guidelines 可能很有趣。
【讨论】：
在效率和可读性之间总是有一些选择。当然table tr td .class 可读性最强，但效率非常低，可以简化 - 你是否在任何地方看到过（假设有效标记）tr 没有table 或td 没有tr？至少你可以评论多余的部分：
/* table tr */ td .class {
color: #ccf;
}
有时正如其他人所提到的，您需要额外的特异性，例如你的#elem 应该到处都是红色的，除非在#content 的特定上下文中。
#elem {
/* usually red */
color: red;
}
#content #elem {
/* except when in specific context */
color: black;
}
【讨论】：