特定于元素的 CSS 选择器不好吗？

Question

p.error 比 .error 更好还是更差？

我读过，特定于元素的选择器很糟糕，只有在真正需要的时候才应该使用，但似乎没有人知道为什么。我的意思是我确实理解 .error 更适合代码重用，但是是否有某种特定原因为什么我不应该始终使用元素来处理类？

Answer 1

CSS 选择器是从右到左读取的。因此，p.error 比 .error 多了一个步骤。这可能会导致较小的集合，也可能不会 - 取决于您的标记。

然而，这是一个微观优化。除非我们讨论大量的选择器，否则不会影响性能。

这是一篇关于 CSS 选择器的精彩文章，详细介绍了如何评估它们： http://css-tricks .com/efficiently-rendering-css/

Answer 2

.error 比 p.error 更有效。

要了解为什么这样做更有效，我建议您阅读 这篇文章 的 css 技巧。

Answer 3

不，这还不错，但它可能并不总是

像 Google 的 PageSpeed 和 YSlow 这样的必要工具！将这些类型的选择器称为“过度合格”，也许这就是您从 - 阅读材料

以 p#myid 为例 - 无论如何，ID 在页面上应该始终是唯一的，因此根本不需要限定它与 p 元素一起使用。当计算特异性时，ID 已经具有最高的权重，因此添加额外的部分来尝试添加更多特异性是完全多余的。

然而，对于像您的示例这样的类名，有时绝对需要添加限定符，因为您可能希望该类可在不同类型的元素上重用，但具有不同的属性，具体取决于它是 div 还是例如，“限定符”使选择器更加具体

.error {background: red; margin: 5px;}
p.error {margin: 2px;}

上面的代码意味着您可以在任何元素上使用 error 类，但是它的边​​距为 5px如果你在 p 元素上设置错误类，第二个选择器实际上正在做一些事情，它会覆盖第一个选择器的边距，但仍然获得背景颜色

所以它们完成了工作，但你经常看到许多人在不必要的时候过度限定所有元素。例如，如果您只将 .error 类应用于 p 元素，那么您就不会需要第二个选择器。

经验法则是从右侧开始尽快使选择器唯一。

Answer 4

拥有一个非常具体的选择器不会导致性能不佳，但如果有很多声明适用于一个元素，那么性能就会受到影响。否则唯一的问题是它会增加 no 。加载样式表时要下载的字节数。相信我，HTML 中传递的每个额外字符都是有害的，并且会降低页面加载速度。

在现代浏览器应用 CSS 级联期间，以下是每个 CSS 属性发生的过程：每个网页元素：

1. 从所有来源收集该属性的所有声明。这包括默认浏览器样式和自定义用户样式以及作者样式表。如果有多个，请继续执行 2。

2. 按重要性和来源对声明进行排序（从最低优先级到最高优先级）：

   • 用户代理样式表（默认浏览器样式）
   • 用户样式表（用户的自定义样式表）中的正常声明
   • 作者样式表中的正常声明（网页样式表；外部、嵌入和内联样式）
   • !作者样式表中的重要声明
   • !用户样式表中的重要声明

   优先级最高的获胜。如果多个声明具有相同的优先级，则继续执行 3。

3. 按选择器特异性排序。具有最具体选择器的获胜者。如果没有明显的获胜者，请继续执行 4。

4. 源中最后出现的获胜！

如果级联未在元素上设置 CSS 属性，则浏览器将回退到使用从元素的父级继承的属性（这只发生在某些属性上），否则该属性将设置为 CSS 默认值。

根据上面的过程，如果你使用很多更具体的选择器，那么至少在3层深度之后才会做出选择。因此，越多则没有。可能适用于某个元素的声明越多，性能就越低。

因此，您必须尽可能具体。

Answer 5

原因是特殊性。例如...

• +1 每次按类访问
• +1 每次按标签访问
• +10 每次按 ID 访问
• 等。

因此，如果您有一个类和一个标签访问，则该样式的特异性为 2 (1+1)。

稍后，如果您尝试设置所有 .error 元素的样式，但 p.error 元素中的样式发生冲突，则较高的特异性将获胜。这可能会导致一些令人头痛的问题。这就是为什么你可能不想总是使用标签+类。

（话虽这么说，特异性解决的问题比它产生的问题多得多，并且通常被认为是非常棒的。）

Answer 6

作为一般经验法则，浏览器评估的选择器越少越好。

如果 .error 用于多个标记，则 p.error 不一定比 .error “更糟”。例如 div.error （请参阅底部的脚注）。

但如果它只在一个段落中使用，那么拥有 p.error 只会让浏览器更加努力地工作，即

首先它必须找到具有类属性 error 的所有元素然后仅通过 p 标签来过滤它们。

以下是一些有关优化浏览器渲染对 Google 页面速度的有趣读物地点。

---

脚注

但是，如果您需要在多个标签上使用一个类，最好只放入适用于这些标签的 css 样式，而不是尝试将其分开。例如

.error
{
   color:red;
}

h1
{
font-size:2em;
}

p
{
   font-size:0.8em;
}


<h1 class="error">Bad Heading!</h1>
<p class="error">bad!</p>

，无论如何，这种方式都不需要为类添加标签前缀。

我希望这有帮助！