我已经阅读了有关 CSS 中选择器的最佳顺序的所有内容，但我经常（一直）看到人们这样做......
nav ul li#email-me a {
width: 120px;
height: 43px;
background: url(images/email_me.png) no-repeat top left;
display: block;
}
根据我的阅读，我的理解是这对性能更好......
#email-me a {
width: 120px;
height: 43px;
background: url(images/email_me.png) no-repeat top left;
display: block;
}
我错过了什么吗？第二种方法更好吗？如果是，为什么大家都用第一种方法？
【问题讨论】：
标签： css css-selectors
我经常使用第一种方法，因为
正如some other 答案中所述，它更具体。 ID 不会自动使整个规则永远比其他任何规则更具体；你可以添加一个类型选择器——或者除了通用选择器*之外的几乎任何东西——到ID中，它会立即用一个单独的ID选择器来消除规则。我发现自己并没有像我为组织所做的那样，故意使用这种技术来增加选择器的特异性......
详细说明组织：这种规则通常与以nav ul 开头的其他规则相关，它有助于将它们与一些已经存在的初始选择器直观地分组。
例如：
nav ul {
/* Styles for the ul */
}
nav ul li {
/* Styles for the items */
}
nav ul li a {
/* Styles for the item links */
}
/*
* If the selector here were just #email-me a, it'd be impossible
* to see, right away, how it's related to the above rules, without
* studying the markup that it applies to, and so on.
*/
nav ul li#email-me a {
/* Styles for the link in the #email-me item */
}
第二种方法应该更快，因为在用 ID 识别祖先元素后不需要执行额外的检查，但我没有基准，也懒得做任何基准。
【讨论】：
您的第二个示例可能会表现更好，但问题是权衡 performance 与 context。
例如，在您的第二个示例中，您说任何作为 id 为 email-me 的任何元素的后代的锚元素都应该具有样式。问题是：这真的是你的意思吗？
例如，如果在不同的页面上，另一个元素要使用email-me 的id，比如说div 元素，它内部的链接是否应该具有相同的样式？你说的真的是这样吗？如果是，那就太好了。
但是，如果不是，那么您真的是指第一个示例中描述的上下文吗：仅锚点，即 ID 为 email-me 的列表项的后代，它们是内部无序列表的后代页面的导航部分。
我会争辩说，就像I have before，这真的取决于你想说什么。但我想说的是，在大多数情况下，为了性能而牺牲特异性/清晰度并不是一个好的交易。
【讨论】：
就性能而言，第二种方法确实比第一种方法好不了多少。
根据Mozilla，样式系统从键选择器（在您的示例中为a）开始向左移动，尝试将DOM 树中每个元素的祖先与选择器匹配。
它被认为是低效的，因为系统首先找到所有a标签并遍历每个标签的dom树。如果您的页面上有一千个a 标签，则需要遍历每个标签的祖先以尝试匹配选择器。以特定 ID 或类为目标会更有效。
实际上，除非您的页面包含大量元素，否则这是一种您通常不需要担心的微优化。
【讨论】：
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
阅读特异性。很多人都做错了，这不足为奇。
【讨论】：
这在某种程度上取决于个人选择。您展示的第一个选择器的一个小防御：它显示了更好的上下文链。当滚动浏览大量 CSS 以查看 #email-me 元素是否适合时，它会很有帮助。在您的示例中，我可以看到它是 nav 结构的一部分，它提示了它的使用方式。
在性能方面，差异极小（可以忽略不计）。
然而，在我看来，最好的 CSS 选择器是最少的 CSS 选择器。所以我投票给第二个。
【讨论】：
有时，人们试图克服某种特殊性；他们只是不断将部分添加到他们的选择器中，直到它比另一个更具体。
但更有可能只是无知和/或粗心。
我们比他们强！ :D
【讨论】：