id和类的区别是什么?

小开

id在整个页面中必须是唯一的。

一个类可以应用于许多元素。

有时候，使用id是个好主意。

在一个页面中，你通常有一个页脚，一个页眉…

然后页脚可以是一个带有id的div

<div id="footer" class="…">

而且还有课

小开

id是唯一的。不类。元素也可以有多个类。类也可以动态地添加和删除到元素中。

任何可以使用ID的地方都可以使用类。反之则不然。

惯例似乎是对每个页面上的页面元素使用id(如“导航栏”或“菜单”)，对其他所有元素使用类，但这只是惯例，你会发现使用上的差异很大。

另一个区别是，对于表单输入元素，<label>元素通过ID引用字段，因此如果要使用<label>，则需要使用ID。是一个可访问性的东西，你真的应该使用它。

在过去的岁月里，id也是首选，因为它们很容易在Javascript中访问(getElementById)。随着jQuery和其他Javascript框架的出现，现在这几乎不是一个问题。

小开

类用于将您的样式应用于一组元素。ID样式只应用于具有该ID的元素(应该只有一个)。通常使用类，但如果只有一个类，则可以使用id(或直接将样式插入元素)。

小开

任何元素都可以有类或id。

类用于引用某种类型的显示，例如，您可能有一个css类用于表示这个问题的答案的div。因为会有很多答案，多个div将需要相同的样式，你将使用一个类。

一个id只引用一个元素，例如右边的相关部分可能有特定于它的样式，而不是在其他地方重用，它将使用一个id。

从技术上讲，您可以使用所有的类，或者在逻辑上拆分它们。但是，您不能对多个元素重用id。

小开

类应该用于你想要相同样式的多个元素。ID应该用于唯一的元素。看这个教程。

如果你想成为一个严格的墨守成规者，或者如果你想让你的页面是符合标准的验证，你应该参考W3C标准。

小开

最佳答案

ids必须是唯一的，因为class可以应用于很多东西。在CSS中，__abc2看起来像#elementID，而class元素看起来像.someClass

一般来说，当你想引用一个特定的元素时使用id，当你有很多相似的东西时使用class。例如，常见的id元素是header， footer， sidebar。常见的class元素有highlight或external-link。

阅读级联并理解分配给各种选择器的优先级是个好主意:http://www.w3.org/TR/CSS2/cascade.html

然而，你应该理解的最基本的优先级是id选择器优先于class选择器。如果你有这个:

<p id="intro" class="foo">Hello!</p>

和:

#intro { color: red }
.foo { color: blue }

文本将是红色的，因为id选择器优先于class选择器。

小开

类就像类别。许多HTML元素可以属于一个类，而一个HTML元素可以有多个类。类用于应用通用样式或可以跨多个HTML元素应用的样式。

id是标识符。他们是独一无二的;其他人不允许拥有相同的ID。id用于向HTML元素应用唯一的样式。

我以这种方式使用id和类:

<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>

在这个例子中，标题和内容部分可以通过#header和#content设置样式。内容的每个部分都可以通过#content .section应用一个通用样式。只是为了好玩，我为中间部分添加了一个“特殊”类。假设您希望特定的部分具有特殊的样式。这可以通过.special类实现，但是section仍然继承了#content .section中的通用样式。

当我进行JavaScript或CSS开发时，我通常使用id访问/操作非常特定的HTML元素，并使用类访问/应用样式到广泛的元素。

小开

CSS是面向对象的。ID表示实例，class表示类。

小开

或许打个比方有助于理解其中的区别:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

学生ID卡是不同的。校园里没有两个学生持有相同的学生ID卡。然而，许多学生可以并且愿意彼此分享至少一个类。

将多个学生放在一个类标题下是可以的，比如生物学。但是把多个学生放在一个学生下面是不能接受的。

当通过学校对讲系统传递规则时，你可以将规则传递给类:

“明天，所有的学生都要穿一件红衬衫去上生物课。”

.Biology {
color: red;
}

或者你可以给一个特定的学生规则，通过调用他唯一的ID:

“乔纳森·桑普森明天要穿绿色衬衫。”

#JonathanSampson {
color: green;
}

在这种情况下，乔纳森·桑普森收到了两个命令:一个是生物课上的学生，另一个是直接要求。因为通过id属性直接告诉Jonathan穿绿色衬衫，所以他将忽略先前穿红色衬衫的请求。

更具体的选择器获胜。

小开

在哪里使用ID而不是类

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

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

小开

CSS选择器空间实际上允许有条件id样式:

h1#my-id {color:red}
p#my-id {color:blue}

将按预期渲染。你为什么要这么做?有时id是动态生成的，等等。进一步的用途是基于高级ID赋值来呈现不同的标题:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

就个人而言，我更喜欢较长的类名选择器:

body#list-page .title-block > h1 {font-size:56px}

因为我发现使用嵌套的id来区分治疗有点反常。只要知道，当萨斯/SCSS世界的开发人员得到这些东西时，嵌套id正在成为规范。

最后，当涉及到选择器性能和优先级时，ID往往会胜出。这完全是另一个主题。

小开

在应用CSS时，将其应用于类，并尽量避免应用于id。ID只能在JavaScript中用于获取元素或任何事件绑定。

应该使用类来应用CSS。

有时必须使用类进行事件绑定。在这种情况下，尽量避免使用用于应用CSS的类，而是添加没有相应CSS的新类。当你需要更改任何类的CSS或更改任何元素的CSS类名时，这将会有所帮助。

小开

在高级开发ids中，我们基本上可以使用JavaScript。

出于可重复的目的，类es与ids相反很方便，而ids应该是唯一的。

下面是一个例子来说明上面的表达:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

现在你可以在这里看到box和box1是两个(2)不同的<div>元素，但我们可以对它们应用box和bg-color-red类。

这个概念是OOP语言中的继承。

小开

1) div id不可重用，只能应用于HTML的一个元素，而div类可以添加到多个元素中。

2)一个id更重要，如果两者都应用于同一个元素，并且有冲突的样式，id的样式将被应用。

3) Style元素总是引用div类。(点)在他们的名字前面，而div id类是通过在他们的名字前面放一个#(哈希)来引用的。

4)举例:-

类在<style>声明- .red-background { background-color: red; }

在<style>声明中的id - #blue-background {background-color: blue;} < / p > < p > <div class="red-background" id="blue-background">Hello</div> 这里的背景颜色为蓝色

小开

id和class是两个全局/标准HTML属性(下面的全局属性可用于任何HTML元素)。

class为一个元素指定一个或多个类名(引用样式表中的类)

id元素的唯一id

id属性提供了元素文档范围内的唯一标识符，其中class属性提供了对类似元素进行分类的方法。

id属性值必须在整个HTML页面中是唯一的，class属性可以在任何想要应用相同属性的地方被重用

小开

类用于具有公共属性的多个元素。例如，如果你想让p和body标签的颜色和字体相同，使用class属性或在一个除法本身。

另一方面，Id用于突出显示单个元素属性，并且仅用于特定元素。例如，我们有一个带有某些属性的h1标签，我们不希望它们在整个页面的任何其他元素中重复。

需要注意的是，如果在元素中同时使用class和id，则*id将覆盖class属性。*因为id只用于单个元素

参考下面的例子

<html>
<head>
<style>
#html_id{
color:aqua;
background-color: black;


}
.html_class{
color:burlywood;
background-color: brown;
}
</style>


</head>
<body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam!
Mollitia enim,
nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
</body>
</html>

我们生成输出

Output

小开

在CSS中，类选择器是一个以句号(“.”)开头的名称，ID选择器是一个以散列字符(“#”)开头的名称。ID和类之间的区别是，ID可以用来标识一个元素，而类可以用来标识多个元素。