CSS：在ID之前使用标签类型？

Question

其中一位工作人员将标签名称放在所有CSS选择器前面，用于元素ID。例如：

div#footer {

}

这与以下相反：

#footer {

}

他的理由是，对大多数浏览器来说，这是一个更快速的查找，因为他们不需要检查每种元素的id属性 - 仅div个元素。他还指出应该使用类（例如div.header-label元素<div class="header-label"...）来完成此操作。

听起来合情合理，但这是真的吗？

Answer 1

你的同事错了，恰恰相反：

• https://developer.mozilla.org/en/Writing_Efficient_CSS
• http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html

但也要记住，CSS优化是微优化，最后在大多数情况下都是无关紧要的：

• http://meiert.com/en/blog/20090312/performance-of-css-selectors/

Answer 2

这可能不是真的;布局引擎很可能会构建一个哈希表。

然而，除非您的页面具有疯狂数量的元素，否则它肯定不会产生显着差异。 （在这种情况下，你遇到了更糟糕的问题）

您应该使用更具可读性的选择器 另外，请记住有人可能会将#footer更改为<span>。

Answer 3

这是一个有用的练习，恕我直言，当你有多个使用相同ID的标签类型时，这当然是无效的。但是，如果您开始使用一段无效的HTML / CSS，并且无法正确修复它，那么使用TAGTYPE #ID可能会很有用。

Answer 4

我个人并不认为这里的表演可能会成为一个问题，除非需要改变许多风格。

在任何情况下，这两个示例在语义上都不同，因为#footer将涵盖div#footer不会发生的情况。因此，除了个人品味，我们还谈论两件不同的事情。然后，如果你真的使用ID，因为它们应该被使用，所以没有任何区别..

Answer 5

将标记附加到id更具体。您可以在css中创建一个可以应用于任何元素的id，但是如果附加了标记名称，则只能使用这些规则（除非您列出其他元素，类或带有逗号的id）标记，并且该ID为id ：

http://www.w3.org/TR/CSS2/selector.html#id-selectors

Answer 6

很难想象这个CSS“功能”的有效用途。

假设表单有year字段。

input#year {
    width: 4em;
}

如果该字段呈现为select，则会阻止该规则的应用。

至于表现因素，我认为@Dave是最好的揭穿。