CSS中哪个更好：div.something还是只用.something？

Question

在CSS中，当在div（例如）上设置样式时，除了提供更精确的匹配之外，包括“div”是否有任何好处？它可能会使浏览器渲染更快吗？

例如：

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

比...更好

.something { font-size: 1em; }

除了将其缩小到只有div，还有其他原因吗？

（我问这个问题的原因是最近我偶然发现了一个包含'div'的知名网站，但大多数网站都不会费心）

更新:

感谢所有答案。结论是速度是一个因素，但不值得注意，因此可以忽略。在最佳实践方面的共识是包括标签更干净 - 一般规则应该尽可能保持所需样式的CSS“紧凑”。

- Jo P

Answer 1

除了两个选择器的不同语义，还请阅读：CSS 的速度。

- Gumbo

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>

- naspinski2

Answer 3

在规则中添加元素选择器（div），可以增加规则的特殊性，使其比通用类选择器（.something）更加重要。

这也使得您的CSS更易读。如果您的所有类选择器都没有与元素前置，那么这意味着您的类是模糊不清的，并且可以应用于任何元素（这可能是有意为之，但更常见的情况是不这样做）。

正如上面所述，使用元素名称会带来速度方面的权衡，但几乎不会被注意到。

- ndorfin

Answer 4

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

- Vinze

Answer 5

我认为这个问题与通常众所周知的编程概念——作用域限制非常相似：你将变量和其他资源的作用域限制在最小范围内。

同样地，如果你知道某个样式只会用于具有特定类的 div 元素，那么将“类的作用域”限制在 div 元素上是有意义的。这样可以减少混乱，使你的样式表更易于维护。

- DrJokepu

---

感谢所有回答的人。因此，共识是这纯粹是一个范围问题。 - Jo P

将 html 元素类型的依赖关系添加到作用域限制中并不比较好。这样会创建一个不必要的依赖关系，使您的 html 和样式表难以维护。html 的更改突然需要同时更改 css。这不是良好的设计。 - Magnar

Magnar：我几乎无法想象在现实世界中，HTML 的重大变化不需要对 CSS 进行更改的情况。 - Tamas Czinege

但是，Jokepu，大多数更改肯定不是实质性的，对吗？ - Magnar

是的，大多数更改并不重要。但我会称任何更改都是实质性的，比如将标签从 div 更改为 p。 - Tamas Czinege

Answer 6

类应该结构良好、功能性强且原子化。如果您认为会遇到像 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 {}

- kRON

Answer 7

如果你想让其他具有相同类名的标签具有不同的外观，那么这可能是一个好主意。

我总是包含标签名称以获得更好的可读性，并确保不会覆盖共享类名的其他规则。

- Tomh

Answer 8

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

对于需要指定元素类型以区分两个规则的情况，我建议改变类名。不要期望那个div永远是div。它可能更适合作为p或fieldset或label。

避免不必要的依赖关系。

低特异性的css规则是一个问题，但添加元素类型并不是解决方案。如果我的.price被更改为div.price，意外匹配的概率只降低了一点点。你最好使用外部#id来命名空间化它。

- Magnar

Answer 9

除非您在其他地方重用类something，并且当然您没有应使用CSS优先级模式解决的冲突。如果是这种情况，则div.something具有比.something更高的优先级，因为它更具体。请参阅计算选择器的特异性来自CSS2规范。

- Leandro López