5

在 CSS 中，当在 div 上设置样式（例如）时，包含 'div' 是否有任何好处，而不是让它更精确地进行匹配。浏览器渲染速度可能更快吗？

即是：

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

好于

.something { font-size: 1em; }

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

（我问的原因是我最近偶然发现了一个包含 'div's 但大多数人不会打扰的著名网站）

更新：

感谢所有的答案。结论是速度是一个因素，但并不明显，因此值得忽略。最佳实践的共识是包含标签更简洁 - 一般规则应该是保持 CSS 尽可能“紧”以获得所需的样式。

4

9 回答 9

5

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

于 2009-02-17T10:40:07.797 回答
3

如果你想在不止 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>
于 2009-02-17T10:40:21.990 回答
2

将元素选择器 (div) 添加到规则中会增加规则的特异性，使其比通用类选择器 (.something) 更重要

它还使您的 CSS 更具可读性。如果您的所有类选择器都没有预先添加元素，则意味着您的类是模棱两可的，并且可以应用于任何元素。（这可能是意图，但更多时候不是）

如上所述，使用元素名称会在速度上进行权衡，但这几乎不会引起注意。

于 2009-02-17T10:42:49.100 回答
1

好吧，我认为唯一的目的就像您说的“将其缩小到仅 div”。所以这<p class="something">应该与div的行为相同或不同......

于 2009-02-17T10:37:10.983 回答
1

我认为这个问题与广为人知的范围限制编程概念非常相似：您将变量和其他资源的范围限制在最低限度。

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

于 2009-02-17T10:37:17.177 回答
0

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

我总是包含标签名称以获得更好的可读性，并且我确信如果它们共享一个类名，我不会覆盖其他规则。

于 2009-02-17T10:36:38.897 回答
0

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

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

避免不必要的依赖。

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

于 2009-02-17T10:41:14.593 回答
0

类应该具有良好的结构、功能性和原子性。有时，如果您认为自己会遇到类似的情况，最好将其缩小到 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 {}
于 2009-02-17T10:44:17.583 回答
0

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

于 2009-02-17T11:08:27.523 回答