Question

我已经阅读了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;
}

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

Answer 1

我经常使用第一种方法，因为

正如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的祖先元素后不需要执行额外的检查，但是我没有基准，我也不会费心去制作任何基准。

Answer 2

有时人们试图克服这种特殊性;他们只是继续在他们的选择器上添加部分，直到它比另一部分更具体。

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

我们比他们好！：d

Answer 3

第二种方法在性能方面确实没有第一种方法好。

根据Mozilla，样式系统以键选择器（在您的示例中为a）开始，并开始向左移动，尝试将DOM树中每个元素的祖先与选择器匹配。 / p>

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

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

Answer 4

你的第二个例子可能表现更好，但问题是权衡性能与上下文。

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

例如，如果在不同的页面上，另一个元素要使用email-me的id，那么让我们说一个div元素，它内部的链接应该是相同的样式吗？这真的要你说吗？如果是，那就太好了。

但是，如果没有，你真的是指第一个例子中描述的上下文：只有作为id email-me的列表项的后代的锚，它们是无序列表的后代，在页面的导航部分内。

我会像I have before那样争辩说，这实际上取决于你想说的话。但我想说，大多数时候，牺牲性能的特异性/清晰度并不是一个好的交易。

Answer 5

这取决于个人选择。您展示的第一个选择器的小防御：它显示了更好的上下文链。滚动浏览大量CSS以查看#email-me元素如何适合时，它会很有帮助。在您的示例中，我可以看到它是nav结构的一部分，它提供了如何使用它的提示。

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

但是，在我看来，最好的CSS选择器是最少的CSS选择器。所以我投票给第二个。

Answer 6

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

了解特异性。很多人做错了也就不足为奇了。

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

6 个答案: