Question

在CSS中，当在div上设置样式（例如）时，除了为匹配提供更高的精度之外，包括'div'还有什么好处。浏览器渲染可能更快吗？

即是：

div.something { font-size: 1em; }

优于

.something { font-size: 1em; }

除了将其缩小到只有div之外的任何其他原因？

（我问的原因是我最近发生了一个突出的网站，包括'div'，但大多数人都不打扰）

更新：

感谢所有答案。结论是速度是一个因素，但不值得注意，因此值得忽略。关于最佳实践的共识是，包括标签更清晰 - 一般规则应该是尽可能保持CSS对所需风格的“紧密”。

Answer 1

除了两个选择器的不同语义外，请阅读：Speed of CSS

Answer 2

如果你想在一个以上的div上使用一个类，你可以使用像

这样的通用类

.something{}

但是一个类越具体，它就越突出，无论顺序如何，即：

#someID div.something { background: green; }
div.something { background: blue;}
.something { background: red; }

由于第一个是最具体的：

<div class="something"> this will be blue </div>
<div id="someID">
  <div class="something">
    this will be green
  </div>
</div>
<p class="something">this will be red</div>

Answer 3

将元素选择器（div）添加到规则会增加规则的specificity，使其比通用类选择器（.something）更重要

它还使您的CSS更具可读性。如果您的所有类选择器都没有前置元素，则意味着您的类具有暧昧性，并且可以应用于任何元素。（这可能是意图，但更常见的不是）

如上所述，通过使用元素名称进行速度权衡，但它几乎不可察觉。

Answer 4

嗯，我认为唯一的目的就像你说“将其缩小到只有div”。因此<p class="something">的行为与div相同或不同......

Answer 5

我认为这个问题与范围限制的一般众所周知的编程概念非常类似：您将变量和其他资源的范围限制到最小。

类似地，如果您知道样式将仅与具有该类的div一起使用，则将“类的范围”限制为div是有意义的。它减少了混乱，使您的样式表更易于维护。

Answer 6

如果您希望其他具有相同类名的标签具有另一种外观，那么这样做可能是个好主意。

我总是包含标签名称以提高可读性，我确信如果他们共享一个类名，我不会覆盖其他规则。

Answer 7

将div添加到选择器的开头会在css规则和html文档之间创建一个额外的依赖关系。突然改变元素类型也需要你改变css，没有充分的理由。

对于需要指定元素类型以区分两个规则的场景，我建议改为更改类名。不要指望div总是一个div。作为p或fieldset或标签可能更有意义。

避免不必要的依赖。

低特异性css规则是一个问题，但添加元素类型不是解决方案。如果我的.price更改为div.price，则非预期匹配的概率仅略微降低。使用外部#id命名它会更好。

Answer 8

类应该结构良好，功能和原子。如果你认为你会遇到类似

的情况，有时将它缩小到element.name会很好

div.highlight {
    background: #FF00FF;
}

span.highlight, p.highlight {
    color: #FF00FF;
}

否则你必须做类似

的事情

.highlight {
    color: #FF00FF;
}

div.highlight {
    background; #FF00FF;
    color: inherit;
}

我认为，作为拇指的一般规则，一个类定义应适用于应用于它的所有元素。如果存在特定情况，您必须覆盖类的默认定义，对于初学者来说，至少要定义一个新类，这样就不会破坏其他元素的表示。

您还需要确定何时避免对选择器的此类结构依赖性，例如

div#main div.section h1.title span.link { }

但是写作

会更好

div#main span.link {}

Answer 9

除非您在其他地方重用类something，否则它不会产生任何影响，当然您没有应该使用CSS优先级架构解决的冲突。如果是这种情况，div.something的优先级高于.something，因为它更具体。请查看Calculating a selector's specificity中的CSS2 Specification。

在CSS中有什么好处：div.something或者只是.something

9 个答案: