在CSS中使用.Class或#ElementId之间的区别是什么？

Question

我一直想知道......在CSS中创建样式类并将其应用于元素或使用#elementId表示法创建样式（除了能够将类分配给不同的元素）之间有什么区别吗？ / p>

例如......

#div1
{
 background-color: Yellow;
}

<div id="div1">
    Hello world!
</div>

或者

.div1
{
 background-color: Yellow;
}

<div class="div1">
    Hello world!
</div>

谢谢！的：）

Answer 1

ID在文档中必须是唯一的。 Classes可以任意数量和组合使用。因此，您可以在一个元素上对多个元素和多个类使用一个类。

Answer 2

另一个区别; id-selectors比class-selectors更具体，所以我相信它们会“胜过”任何其他存在的选择器。你可以使用“important”来做同样的事情，但是id选择器可能更容易。

但应谨慎使用id-selectors ......

Answer 3

许多类可以包含给定的“类”，而给定的ID只能识别一个元素。如果你需要找到一个唯一的元素使用ID，否则如果你想在你的html使用'class'中标记许多基本相同但位于不同位置的元素。

你回答了自己的问题，它们只是“识别”元素的机制。

Answer 4

使用#elementID仅适用于由该id唯一标识的元素。一个类可以被多个元素使用

但是有一个优先顺序。使用id的选择器比使用类的选择器具有更大的权重，并且当存在冲突时，＃id选择器将优先使用

编辑：有关选择器优先级的详细信息，请参阅http://kiribao.blogspot.com/2008/03/css-selectors-precedence-and-ways-to.html

编辑：另请参阅http://www.w3.org/TR/CSS21/cascade.html#specificity

中的w3c规范

Answer 5

性能或功能方面，没有区别[引证需要]。

唯一真正的区别是语义，如果您正在处理具有唯一ID的单个节点，或者您需要一个标记多个节点的可重用类。

Answer 6

存在一些差异：

唯一

ID必须是唯一的，类可以重复。如果你看看它们的预期用途，这是合乎逻辑的。

用法

ID应该用于表示网站的大部分（例如#header），或者通过Javascript访问的唯一元素（例如#killSession）

类应该用于可重复使用的部分。

特异性

ID的特定值为100，而类的值仅为1。

所以这个规则：

#id .class

值得101分。

这条规则：

#id #id2

值得200分，并且总是胜过#id .class规则（无论源顺序如何）。

性能

性能方面，按ID获取元素总是比类快，尤其是在谈论Javascript时。我很乐意看到有人为此加上一些冷酷的数字。

讨论

• 有关选择器性能的有趣讨论可以在Shaun Inman's blog找到。
• 在Jeff Croft Applying OOP concepts to CSS
中讨论了类的用法

Answer 7

类是将具有相似功能（用于编写脚本）和/或布局（用于样式）的元素组合在一起。 ID应始终是元素的唯一标识符。

对于应该具有ID的内容的一个很好的示例是文档的内容区域，这通常是使用#content ID。类适用于文档中可能出现两次的任何其他内容，例如应该具有特殊标记或行为的标题，或者应该打开灯箱而不是正常的“转到URL”行为的链接。

HTH。