Question

在设计特定的html元素时，我倾向于始终使用class属性。 css代码看起来更干净。

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

Answer 1

id s id 包含元素。类 es 类 ify元素。

如果“这是一种......”（例如地址）

，请在元素上放置一个类

如果“它是 ...”（例如导航），请在元素上添加ID

Answer 2

按照这种偏好顺序：

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

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

关于何时使用类或ID，您可以在可以使用时使用ID，而在不能使用时使用。

Answer 3

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

，则使用class

Answer 4

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

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

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

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

Answer 5

选择风格的方法有很多种。您可以使用id，类和标签，然后将它们组合起来：

#nav - 适用于id =“nav”

的元素

#nav div - 适用于id =“nav”

的元素内的任何div元素

#nav .left - 适用于id =“nav”元素中class =“left”的任何元素

.item span - 适用于使用class =“item”

的元素内的任何span元素

.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

Answer 6

IDS

#header
#footer
#sidebar
#menu
#content

类

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

Answer 7

就HTML而言， id 标识DOM中的单个元素，每个元素只能有一个唯一ID，而类分类一个或多个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>

Answer 8

我主要使用ID来识别已经分配了类的元素中的特定元素。这样我就可以更容易地识别出哪个元素具有哪种样式。

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

Answer 9

id属性仅在每个文档中使用一次。不同之处在于，您对文档中的特定元素具有唯一ID，这在编写脚本时很方便，或者实际上甚至在需要专门设置一个元素时也适用于CSS。

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

例如：

<div id="header" />

您在给定文档上只有一个标题。

<div class="item alternate last" />

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

等

Answer 10

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

ID无法组合（多个ID）。这有效：

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

但这不起作用：

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

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

在这些背景中考虑类和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'
}

注意：这是一个愚蠢的代码，但它是为了明确

元素在每个网页上都是唯一的，但对于网站来说是通用的。因此，在此上下文中使用class是有意义的，即使它在页面上是唯一的。

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

Answer 11

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

我的理由很简单：总是有可能在某个地方，你可能需要另一个。如果您按class设置样式，则只需添加第class个元素，就可以了。如果您按id设置样式，则需要将id更改为class或（如果引用id的任何代码）将{{1}分开进入id和id，然后弄清楚如何划分它们之间的属性和引用。通过class来开始设置样式要容易得多。

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

Answer 12

阅读id中class和HTML 4.01 specification属性的说明。

Answer 13

何处使用ID与班级

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

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

Answer 14

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

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

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

Answer 15

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

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

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

15 个答案:

何处使用ID与班级