为CSS目的使用id属性的原因是什么？

Question

我总是使用class属性，而不是id 用于CSS选择和样式。我知道id必须是唯一的，但这似乎不是将其用于CSS的理由。

我使用id属性的唯一原因是JavaScript和表单标签。

我发现混合id和class出于CSS的目的可能会引起混淆，对我而言，这是强制分离风格和行为的好方法。

是否有充分理由将id用于CSS目的？使用id无法完成的class是否可以实现任何目标？

评论我发现有用/有趣

• 你可以对课程说同样的话。有很多JavaScript可以（并且必须）定位特定类的元素。从行为的角度来看，改变这些实例中的类同样存在问题。 - AaronSieb
• ID在级联中具有与类不同的特异性。 - Killroy
• 使用ID进行样式化是有意义的，如果它是一个没有重复的元素，特别是如果它出现在所有/大多数页面中 - RichN

Answer 1

如果它是一个没有重复的元素，那么使用ID进行样式化是有意义的，特别是如果它出现在所有/大多数页面中。

E.g：

• 页面标题＆amp;页脚
• 搜索框（你可以在那里看到的东西）
• 导航列表（类似于右边的东西）

Answer 2

选择具有唯一ID的任何内容比使用类选择更快。差异可以忽略不计，但在拥有大量DOM元素或密集型Javascript应用程序的应用程序中，它会产生重大影响。

例如，如果您使用的是jQuery，请查看：jquery performance rules

Answer 3

不，但如果你的元素有id，为什么不用它来造型？

你可以对元素名称说同样的话 - 你无法用p做class='paragraph'无法做到的事情。这并不意味着将class='paragraph'添加到每个<p>元素中是个好主意。

Answer 4

ID 标识，类分类。这一点在这里已经多次提及，或多或少。

一个例子是：

<div class="author" id="stephen">[...]</div>

从CSS特异性的角度来看，定位ID会使CSS规则比具有类的规则更具体，甚至是几个类。

因此：

p#recent {}

比

更具体

body>p.news.recent {}

当用户代理找到这两个时，第一个将占优势。

Answer 5

您无需使用ID。您无法使用无法使用类创建的ID创建设计。

据说，使用ID具有将选择器明确标记为仅应用于页面中的一个元素的优点。我通常将它们用于我的页面模板中的样式元素（＃Content，＃Navigation等）。

一般情况下，我会尝试在允许我使标记更简洁的区域中使用它。当选择器可以作为标记时，您应该使用标记。如果可以将ID作为目标，请使用该ID。否则，请使用课程。

但是，再次，你是否使用ID并不是非常重要。

Answer 6

我倾向于认为HTML中id和class的关系类似于面向对象的编程：id就像class的实例。

我使用的类比使用id更多，并且经常使用多类选择器（例如.film.drama）。但是，如果我确实想要识别特定元素，以便我可以应用特定的样式或行为，那么我将分配id，并且通常也分配class。例如。

<ul>
    <li class="film drama">A</li>
    <li class="book drama">B</li>
    <li class="film documentary" id="film-9832">C</li>
</ul>

在分配id时，我认为“在页面上有多个这样的内容是否有意义”。如果答案是肯定的，那么我可能会选择上课。

结果，正如@RichN和@AaronSieb所提到的，我经常使用id来表示特定页面元素，这些元素肯定只出现在页面上一次：

<ul class="sidebar" id="site-meta">[...]</ul>

Answer 7

我使用ID标签的主要原因是与正在阅读我的代码的人进行通信。具体来说，ID标签可以让他们完全放心地引用他们想要的任何特定元素，因为他们知道他们对它所做的任何更改只会影响那一个元素。

编辑：使用您可能不知道的ID标签还有更多技术原因。我根据vol7ron的comment再次更新了这篇文章，并进行了一些进一步的研究以用于历史目的。对于那些不熟悉CSS的人来说，这些信息非常有启发性。

以下大纲详细说明了层叠样式表的“级联”性质。在本大纲中，首先根据大纲的最高标准比较2种CSS样式，即“1. Winner = ！important declaration ”。如果一个样式在该方面的优先级高于另一个样式，则它会获胜。如果它们在该方面相同，请继续下一个标准，直到找到区分因子。

1. Winner = ！重要声明。
   • EG。 #some-element {color: blue !important;}击败#some-element {color: red;}。
2. Winner = 内联CSS 。
   • 例如：
     • <div id="some-element" style="color: yellow;}">some content</div>跳动...
     • <style type="text/css">#some-element {color: red;}</style>和......
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>。
3. Winner = ID 选择器中最精彩的＃。
   • EG。 #some-element#id-2 {color: blue;}击败#some-element {color: red;}。
4. Winner = 类，伪类和其他属性选择器的最大＃。
   • EG。 .some-elements.class-2 {color: blue;}击败.some-elements {color: red;}。
5. Winner =选择器中最精彩的元素名称和伪元素。
   • EG。 #some-element:hover {color: blue;}击败#some-element {color: red;}。
机器上
6. Winner = 最近阅读。
   • 例如：
     • <style type="text/css">#some-element {color: red;}</style>节拍...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>因为内部CSS 是在外部CSS 之后读取的。

Answer 8

如果您有多个同一个类的元素，并且需要为其中一个或多个指定不同的样式，这对我来说似乎非常有用。

Answer 9

我唯一可以想到使用ID的是你是否有特异性战争 - 两个具有相同特异性的元素。应用ID将使您的元素具有更高的特异性 - 确切地说是+100。

因此，如果您有两种定义具有相同特异性的样式，您可能希望通过对另一种应用更高的特异性来“破坏”一种样式。话虽如此，您也可以通过将更具体的类应用于该选择器来实现相同的目标，这样可以将特异性提高10倍。

ID = 100（#foo） class = 10（.bar） element = 1（div）

Answer 10

IMO，使用基于ID的样式是一个坏主意。

ID是唯一的， 只能在您的DOM中出现最多1次。这限制了任何ID相关风格的使用最多1次。

另一方面，

CSS类可以多次使用或根本不使用。

坦率地说，我认为ID应该用于行为，而类应该用于样式。您可以互换使用它们的事实是使Web开发的某些方面不一致的部分原因。

Answer 11

当我知道即将在该特定元素上使用javascript时，我使用id。 ID比javascript中的类要快得多。

Answer 12

我个人更喜欢将ID用于静态页面元素（页眉，页脚）。原因是页面重量。

id =“h”比class =“h”轻。

在我看来，每个字节都很重要。

Answer 13

我在CSS中使用id的主要原因是布局。如果我有一个页眉和页脚，那么：

#header
{
...
...
...
}

#footer
{
...
...
...
}

或者我的主要内容的一个包装，或右侧边栏。如果某人决定他们喜欢我的布局并希望查看来源，那么很容易看到。