使用CSS选择项目的最佳方法

我读过所有关于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;
}

---

我错过什么了吗？第二种方法更好吗？如果是，为什么每个人都使用第一种方法？

有时人们试图克服一种特殊性；他们只是不断地在选择器上添加部分，直到它比另一个更具体

但更可能的是无知和/或轻率

---

我们比他们好！：我经常使用第一种方法，因为

正如回答中提到的，它更具体。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标识祖先元素后不需要执行额外的检查，但我没有基准，也懒得做任何检查。

这多少取决于个人选择。对您显示的第一个选择器的一个小小的辩护：它显示了一个更好的上下文链。当滚动浏览大量CSS以查看email me元素的适用性时，这可能会很有帮助。在您的示例中，我可以看到它是nav结构的一部分，它给出了如何使用它的提示

就性能而言，差异非常小，可以忽略不计

然而，在我看来，最好的CSS选择器是最少的CSS选择器。所以我投票支持第二个

---

阅读专一性。很多人都做错了，这一点也不足为奇。

第二种方法在性能上并不比第一种方法好多少

根据，样式系统从示例中的键选择器a开始，并开始向左移动，尝试将DOM树中每个元素的祖先与选择器匹配

这被认为是低效的，因为系统首先找到所有a标记并遍历每个标记的dom树。如果页面上有一千个a标记，则需要遍历每个标记的祖先，以尝试匹配选择器。以特定ID或类为目标会更有效

---

实际上，除非你有一个包含大量元素的页面，否则这是一种微优化，你通常不必担心。

你的第二个示例可能会表现得更好，但问题是在性能和上下文之间权衡

例如，在您的第二个示例中，您是说任何锚元素，如果它是id为email me的任何元素的后代，则应该具有样式。问题是：这就是你真正的意思吗

例如，如果在不同的页面上，另一个元素使用email me的id，比如div元素，那么其中的链接是否应该具有相同的样式？这真的是你想要说的吗？如果是，那就太好了

但是，如果不是，您真的是指第一个示例中描述的上下文：仅锚定，即id为email me的列表项的后代，即页面导航部分内未排序列表的后代

---

我想说，这真的取决于你想说什么。但我想说的是，大多数时候，为了表现而牺牲特定性/清晰性不是一个好交易。

特定性是我一直在寻找的词！你所描述的正是我所想的，但是你不能针对一个ID为的项目，并且不管它有多嵌套都能找到它吗？事实上，我很少仅仅为了特定性而这样做，尽管对于诸如性能之类的荒谬问题，这绝对是一个合理的理由。更多的是将我的规则分组到样式表中。请参阅我的答案。将ID选择器附加到弱元素选择器会破坏它。@Mathletics:你说的破坏它是什么意思？如果我理解正确，选择器将首先选择所有a元素，然后检查以查找将电子邮件“我”作为父元素的元素。像那样使用ID作为父选择器效率很低。但对性能的影响真的很小。