Question

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

我已经读过特定于元素的选择器是坏的，只有在真正需要时才应该使用，但似乎没有人知道原因。我的意思是我明白.error更适合代码重用，但是有一些特定的原因我为什么不应该总是用元素来处理类？

Answer 1

CSS选择器从右到左阅读。因此，p.error还有一个额外的步骤.error。这可能会导致更小的设置 - 取决于您的标记。

然而，这是微观微观优化。除非我们谈论大量的选择器，否则不会有性能损失。

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

Answer 2

.error比p.error更有效。

为了理解为什么效率更高，我建议您阅读this article css技巧。

Answer 3

不，它不坏，但可能并非总是必要

Google的PageSpeed和YSlow等工具！将这些类型的选择器称为“过度合格”，也许这就是你在“{3}}

中听到”它不好“的部分

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

然而，对于像你的例子这样的类名，有时候肯定需要添加限定符，因为你可能希望该类可以在不同的类型元素上重用，但具有不同的属性，具体取决于它是div还是例如，p，“限定符”然后使选择器稍微具体化

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

上面的代码意味着您可以在任何元素上使用error类，它将具有5px边距，但是如果您在p元素上设置错误类，则第二个选择器实际上正在执行某些操作，它是覆盖第一个边距但仍然获得背景颜色

所以他们做了一份工作，但是当你没有必要时，你经常会看到太多人超过所有元素的资格......例如，如果你只是将.error类应用于{{1那么你就不需要第二个选择器了。

经验法则是让选择器从右侧开始尽快变得独一无二。

Answer 4

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

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

如果级联没有在元素上设置CSS属性，那么浏览器将回退到使用元素父级的继承属性（这仅适用于某些属性），否则该属性设置为CSS默认值

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

所以，你必须具体而言才有意义。

Answer 5

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

如果p.error用于多个代码，则

.error不一定比.error“更差”。例如div.error（见底部的脚注）。

但如果它只用于一个段落，那么p.error只会使浏览器更加努力，即

首先，它必须找到具有类属性error的所有元素，然后通过仅包含p的标记来过滤这些元素。

以下是Google页面速度网站Optimize browser rendering上的一些有趣内容。

脚注

但是，如果你需要在多个标签上使用一个类，那么最好只放入适用于那些标签的css样式，而不是试图将它分开。 e.g。

.error
{
   color:red;
}

h1
{
font-size:2em;
}

p
{
   font-size:0.8em;
}


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

因此无论如何都不需要为类添加标签。

我希望这有帮助！

Answer 6

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

因此，如果您有类和标签访问权限，则该样式的特异性为2（1 + 1）。

稍后，如果您尝试设置所有.error元素的样式，但p.error元素中的样式存在冲突，则更高的特异性将获胜。这可能会引起一些令人头疼的问题。这就是为什么你可能不想总是使用tag + class。

（话虽如此，特异性解决了比它创造的更多问题，并且通常被认为是非常棒的。）