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

问题描述

|

p.error

比than1ѭ好还是坏？ 我已经读到特定于元素的选择器是不好的，只有在确实需要时才应使用，但似乎没人知道为什么。我的意思是我确实理解ѭ1对于代码重用更好，但是是否有某种特定的原因为什么我不应该总是使用元素来寻址类呢？     

解决方法

.error

比

p.error

更有效。 要了解为什么这样做更有效，我建议您通过CSS技巧阅读本文。     ,CSS选择器从右到左读取。因此，

p.error

与to1ѭ相比又有一个步骤。这可能会导致较小的结果集-取决于您的标记。 但是，这是微微优化。除非我们谈论大量的选择器，否则不会对性能造成影响。 这是关于CSS选择器的精彩文章，详细介绍了它们的评估方式：http://css-tricks.com/ficiently-rendering-css/     ,不，还不错，但不一定总有必要 Google \的PageSpeed和YSlow之类的工具！将这些类型的选择器称为“合格”，这可能是您从阅读材料中听到的“不好”部分的地方 以“ 7”为例-一个ID在页面上始终应该始终是唯一的，因此根本不需要使用“ 8”元素来限定它。当计算特异性时，ID已经具有最高的权重，因此再次添加多余的部分来尝试增加特异性是完全多余的。 但是，对于像您的示例这样的类名，有时绝对希望添加限定符，因为您可能希望类在不同的类型元素上可重用，但具有不同的属性，具体取决于（例如）“ 9”还是“ 8”， \“ qualifier \”然后使选择器更加具体

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

上面的代码意味着您可以在任何元素上使用

error

类，它将有5px的边距，但是，如果您在

p

元素上设置了错误类，则第二个选择器实际上正在做某事，它将覆盖第一个选择器边距，但仍获得背景色 这样他们就干了，但是在不必要的情况下，您经常会看到太多的人对所有元素进行限定。例如，如果您只将ѭ1类应用于

p

元素，那么您就不需要第二个选择器。 经验法则是使选择器从其右侧开始尽可能快地唯一。     ,拥有非常具体的选择器并不会导致性能下降，但是如果有很多适用于元素的声明，那么性能会受到影响。否则，唯一需要关注的是它增加了编号。要下载的用于加载样式表的字节数。相信我，HTML中传递的每个多余字符都是邪恶的，将降低页面加载速度。 在现代浏览器应用CSS级联期间，以下是每个网页元素的每个CSS属性发生的过程： 从所有来源收集该属性的所有声明。这包括默认的浏览器样式和自定义用户样式，以及作者样式表。如果有多个，请继续执行2。 按重要性和来源按以下顺序对声明进行排序（从最低优先级到最高优先级）： 用户代理样式表（默认浏览器样式） 用户样式表（用户的自定义样式表）中的常规声明 作者样式表中的常规声明（网页样式表；外部，嵌入式和内联样式） ！作者样式表中的重要声明 ！用户样式表中的重要声明 优先级最高的将获胜。如果多个优先级相同，请继续执行3。 按选择器特异性排序。选择者最明确的人获胜。如果没有明确的获胜者，请继续执行4。 源中最后一个赢了！ 如果级联未在元素上设置CSS属性，则浏览器将退回到使用元素父级的继承属性（这仅适用于某些属性），否则该属性设置为CSS默认值。 根据上述过程，如果您使用许多更特定的选择器，则在至少3个级别深入之后将进行选择。因此，没有更多。可能适用于元素的声明的数量，性能将越低。 因此，您必须尽可能做到具体。     ,原因是特异性。例如... 按类别+1每次访问 按标记+1每次访问 每次访问+10 等等 因此，如果您具有类和标签访问权限，则该样式的特异性为2（1 + 1）。 稍后，如果您尝试为所有

.error

元素设置样式，但在

p.error

元素中使用冲突样式，则较高的特异性将获胜。这可能会引起一些麻烦。这就是为什么您可能不想始终使用tag + class的原因。 （话虽这么说，特异性解决的问题比它创造的问题还多，并且通常被认为是“很棒”。）     ,一般而言，浏览器选择的选择器越少，评估效果越好。 如果将

.error

用于多个标签，则

p.error

不一定比

.error

“更糟”。例如

div.error

（请参阅底部的脚注）。 但是，无论如何，如果仅将其用于一个段落，那么将ѭ0设为0只会使浏览器的工作更加困难，即 首先，它必须找到所有具有类属性

error

的元素，然后仅通过具有

p

的标签来过滤这些元素。 这是有关Google Page Speed网站上的优化浏览器呈现的一些有趣的读物。 脚注 但是，如果您需要在多个标签上使用一个类，则最好只放入适用于这些标签的css样式，而不要尝试将其分开。例如

.error
{
   color:red;
}

h1
{
font-size:2em;
}

p
{
   font-size:0.8em;
}


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

因此，无论如何都无需为类添加标签作为前缀。 我希望这有帮助！