级联样式表使用“id”或“class”答案

【问题标题】：Cascading style sheets use "id" or "class"级联样式表使用“id”或“class”
【发布时间】：2009-03-22 10:44:21
【问题描述】：

当为特定的 html 元素设置样式时，我倾向于总是使用 class 属性。 css 代码看起来更干净 imo。

为什么两者都存在你应该使用哪一个以及何时使用？

【问题讨论】：

无论答案是什么，可以肯定地说这不是“因为 '。”在我的 CSS 中看起来比 '#' 好”
我觉得#实际上看起来更好:)
看这里stackoverflow.com/questions/84378/div-class-vs-id
可能重复，stackoverflow.com/q/544010/425313
What's the difference between an id and a class?的可能重复

标签： html css

【解决方案1】：

ids identify 元素。 classes classify 元素。

如果“它是一种......”（例如地址），则在元素上放置一个类

如果“它是 the ...”（例如导航），则在元素上放置一个 ID

【讨论】：

因为这个ids只能被使用一次（在页面中）但是元素可以被多次分类。此外，一个元素只能有一个标识符，但可以有多个分类。然而，元素可以被识别和分类。
总是这样使用它们，但从未真正看到（或想到）解释。我喜欢它:-)

【解决方案2】：

您按照以下优先顺序选择：

ID（页面上必须只有一个）；
元素和类（例如 div.myclass）；那么
没有元素限定符的类。

ID 是迄今为止最快的查找。下一个最快的是按标记名查找。最慢的是类名。

至于什么时候用class或者id，可以用id就用id，不能用class。

【讨论】：

除了事实上，即使速度提升超出可以忽略不计，所有流行的浏览器都将 ID 视为类，如果你有多个具有相同 id 的元素，以及适用于该 ID 的 CSS 规则，则 css 规则适用于两者。

【解决方案3】：

如果它是单个元素，我使用 id，如果它适用于多个元素，则使用 class

【讨论】：

【解决方案4】：

ID 旨在每页使用一次。我使用 ID 来指定主要布局元素

<div id="mainForm">
<div id="wrapper">

一个类可以跨多个元素定义样式。我用它来定义某种类型的元素在页面上出现的方式。

<p class="comments">
<div class="smallText">

【讨论】：

【解决方案5】：

选择样式的方法有很多种。您可以使用 id's、classes 和 tags，并且可以将它们组合起来：

#nav - 适用于 id="nav" 的元素

#nav div - 适用于 id="nav" 元素内的任何 div 元素

#nav .left - 适用于 id="nav" 元素内的 class="left" 的任何元素

.item span - 适用于元素内的任何 span 元素，其值为 class="item"

.item .address - 适用于在 class="item" 元素内的任何 class="address" 元素

div.item - 适用于任何具有 class="item" 的 div 元素

#nav div span - 适用于 id="nav" 元素内的 div 元素内的任何 span 元素

对于 CSS 选择器而言，重要的是它们的具体程度。 id 比类更具体。使用这种风格：

.dark { color: black; }
#bright { color: white; }

这个元素会得到白色文本，因为使用 id 的样式比使用类的样式更具体：

<div id="bright" class="dark">Hello world</div>

还有更多关于选择器和特异性的知识。我发现本教程很好地概述了选择器：Selectutorial

【讨论】：

【解决方案6】：

身份证

#header
#footer
#sidebar
#menu
#content

类

.important
.warning
.validationError
.recent
.outOfDate
.inactive
.weekDay
.previous
.next
.first
.last

【讨论】：

【解决方案7】：

就 HTML 而言，id 标识 DOM 中的单个元素，每个元素只能有一个唯一的 id，而 class 分类一个或多个DOM 中的元素，每个元素可以有多个类。

<div id="this-unique-element" class="class1 class2 class3">...</div>

同样从 CSS 的角度来看，请记住重要性的顺序是从最不具体到最具体。因此，#id 属性会覆盖 .class 属性，而后者又会覆盖 tag 属性。因此，#id 样式优于 .class 样式，除非某些类属性被标记为 !important。

<style>
    #red1, #red2 { color: red; }
    .blue1 { color: blue; }
    .blue2 { color: blue !important; }
</style>

<p id="red1" class="blue1">This text is red.</p>
<p id="red2" class="blue2">This text is blue.</p>

【讨论】：

【解决方案8】：

我主要使用 ID 来识别已分配类的元素中的特定元素。这样我就可以更容易地确定哪些元素得到了哪些样式。

不太确定它们之间是否存在真正的其他区别，除了您只能在页面中使用一次 ID...

【讨论】：

【解决方案9】：

id 属性只能在每个文档中使用一次。不同之处在于，您可以为文档中的特定元素拥有一个唯一的 id，这在编写脚本时很方便，甚至当您只需要专门为一个元素设置样式时，甚至对于 CSS 也是如此。

类更多的是一种“类型”的描述。你可以指定一个元素应该有一个或多个类，这些类描述了它的属性。

例如：

<div id="header" />

给定文档只有一个标题。

<div class="item alternate last" />

您有多个项目，此项目是备用项目之一。这也是最后一项。如果您确定文档中始终只有一个最后一项，您甚至可以将其指定为“last”。

等等

【讨论】：

【解决方案10】：

ID 在文档中必须是唯一的。 CLASS 可以应用于（和组合）同一页面上的多个元素。

ID 不能组合（多个 ID）。这有效：

<div class="beautiful blonde stupid"> blah blah blah </div>

但这不起作用：

<div id="Paris Hilton"> blah blah blah </div>

动态 HTML 通常使用 id 来控制元素。正如 cletus 所提到的，当以某种方式使用 javascript 使页面与用户交互时，具有 id 的元素具有最快的“查找”。

在这些上下文中考虑 class 和 id，每个原因都会变得清晰。

想象一个包含几个功能性 div 的页面。每个 div 都将具有相同的类来显示通用样式（即宽度）。每个 div 在被选中时都需要一个唯一的 id 来设置它的样式。在这种情况下，您可能会遇到这样的情况：

<div class="demo" id="div1" onlick="action()"> blah blah blah </div>

还有一个 javascript 例程，例如：

function action() 
{
  document.getElementById( 'div1' ).style.backgroundColor = 'red'
}

注意：这是愚蠢的代码，但它是为了说明问题

一个元素在每个网页上可以是唯一的，但对一个网站来说是通用的。因此，在这种情况下使用类是有意义的，即使它在页面上是唯一的。

所以，一个通用的经验法则 - 如果它是唯一的，则使用 id，如果它不是使用类。如果需要，将 id 更改为 class 真的很容易。切换回来并不容易。

【讨论】：

【解决方案11】：

出于 CSS 的目的，我分享您只使用 class 的习惯。当 JavaScript 需要触摸元素时，我也会给它们 ids，但我不会在样式表中的 id 上设置样式。

我这样做的原因很简单：总有可能，在未来的某个地方，您可能需要另一个。如果您使用class 对其进行样式设置，则只需使用class 添加第二个元素即可。如果您使用id 对其进行样式设置，则需要将id 更改为class，或者（如果有任何代码引用id）将id 拆分为id 和@ 987654332@ 然后弄清楚如何划分它们之间的属性和引用。只需通过 class 设置样式就更容易了。

我也更喜欢classes，因为你可以为同一个元素分配多个元素，这有助于避免样式表中的无意义重复，尽管这是一个弱论点，因为你没有理由不能做一些样式在id 和其他基于任意数量的classes 的样式上。

【讨论】：

【解决方案12】：

阅读HTML 4.01 specification中id和class属性的描述。

【讨论】：

【解决方案13】：

在哪里使用 ID 与类

两者之间的简单区别在于，虽然一个类可以在一个页面上重复使用，但一个 ID 只能在每个页面上使用一次。因此，在标记页面主要内容的 div 元素上使用 ID 是合适的，因为只有一个主要内容部分。相反，您必须使用一个类来设置表格上的交替行颜色，因为根据定义，它们将被多次使用。

ID 是一个非常强大的工具。具有 ID 的元素可以是一段 JavaScript 的目标，该 JavaScript 以某种方式操纵该元素或其内容。 ID 属性可以用作内部链接的目标，将锚标记替换为名称属性。最后，如果您使您的 ID 清晰且合乎逻辑，它们可以作为文档中的一种“自我文档”。例如，如果块的开始标签的 ID 为“main”、“header”、“footer”，则不必在块之前添加注释说明代码块将包含主要内容"等。

【讨论】：

【解决方案14】：

如果你想要一个简单的答案：

想象一下 Class 就像姓氏，所以你可以将它分配给几个家庭成员，对吧？并且每个成员都应该有一个唯一的名字，这样我们就可以直接调用他们，那就是 Id。

类：您可以将其分配给几个不同的元素组，并且您可以轻松地一次更改它们的样式。
身份证：当您想调用一个特定元素时，您应该使用 ID，但请注意它必须是唯一的

【讨论】：

【解决方案15】：

Id 表示身份，仅表示单个标签。它可以在一个页面上单次使用。

类可以多次使用。它可以在一个页面中多次使用。

【讨论】：