blocks|key|1475014|text|ID应该是唯一的，而类更适合元素的“类型”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1475015|所以你可能会有类似这样的东西：|1475016|<ul+id="menu">
....
</ul>|code-block|syntax|javascript|1475017|因为你的网站上可能只有一个主菜单。|1475018|但是，对于类，您可能具有以下内容：|1475019|<span+class='author'>Paolo+Bergantino|1475020|或者，在这个站点上设置包含答案的div样式：|offset|length|style|CODE|1475021|<div+class='answer'>....</div>|1475022|因为每个页面都会有多个这样的元素，所以它们是一类元素。可以将ID视为元素的社会保险号。只要一个元素足够重要并且是唯一的，你就给它一个ID。这对动态网站也有帮助，因为根据ID选择元素是最快的方法，如果你有多个元素具有相同的ID+(因此违反了这种做法)，Javascript将不会按预期工作。|1475023|entityMap^0|0|0|0|0|0|0|G|3|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|16|8|@$Q|17|R|18|S|T]]|9|@]|A|$]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

IDs are meant to be unique, while classes are better for a "type" of element.

So you might have something like:

<pre><code>&lt;ul id="menu"&gt;
....
&lt;/ul&gt;
</code></pre>

Because you will probably only have 1 main menu on your site.

For classes, however, you might have something like:

<pre><code>&lt;span class='author'&gt;Paolo Bergantino&lt;/span&gt;
</code></pre>

Or perhaps to style the <code>div</code> that contains an answer on this site:

<pre><code>&lt;div class='answer'&gt;....&lt;/div&gt;
</code></pre>

Because there will be multiple of these per page, they are a class of elements. Think of an ID as the social security number of an element. Whenever an element is important enough and is unique, you give it an ID. This also helps with dynamic websites as selecting elements by ID is by far the fastest way, and if you have multiple elements with the same ID (thus violating this practice) Javascript won't work as intended.

blocks|key|173174|text|从w3schools|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|173175|HTML属性为|173176|元素指定了一个唯一的id。|blockquote|173177|173178|该id在HTML文档中必须是唯一的。|173179|id属性可以由JavaScript+(通过HTML+DOM)或CSS使用，以使用指定的id对元素进行更改或设置样式。|173180|173181|和|173182|173183|+类的属性指定元素的类名。|style|BOLD|173184|173185|class属性主要用于指向样式表中的类。但是，JavaScript也可以使用它(通过HTML+DOM)对具有指定类的HTML元素进行更改。|173186|不能在以下html元素中使用class属性:+base、head、HTML、meta、param、script、style和title。|173187|可以将多个类分配给一个HTML元素，例如。这允许你为一个HTML元素组合几个CSS类。|173188|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/^0|1|9|0|0|0|0|0|0|0|0|0|0|1|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1F|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1I|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1L|8|@]|9|@]|C|$]]|$1|R|3|S|5|H|7|1M|8|@$A|1N|B|1O|T|U]]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|1S|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|1T|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]]]

From the <a href="http://www.w3schools.com/" rel="nofollow noreferrer">w3schools</a>:

<blockquote>
 The id attribute specifies a unique id
 for an HTML element.
 
 The id must be unique within the HTML
 document.
 
 The id attribute can be used by a
 JavaScript (via the HTML DOM) or by
 CSS to make changes or style the
 element with the specified id.
</blockquote>

and

<blockquote>
 The class attribute specifies a
 classname for an element.
 
 The class attribute is mostly used to
 point to a class in a style sheet.
 However, it can also be used by a
 JavaScript (via the HTML DOM) to make
 changes to HTML elements with a
 specified class.
 
 The class attribute cannot be used in
 the following HTML elements: base,
 head, html, meta, param, script,
 style, and title.
 
 It is possible to assign multiple
 classes to one HTML element, e.g.
 .
 This allows you to combine several CSS
 classes for one HTML element.
</blockquote>

blocks|key|1475055|text|一个ID指的是一个特定的元素(每个ID都不应该多次使用)；一个类指的是多个元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1475056|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

An ID refers to a specific element (every ID should never used more than once); a class refers to multiple elements.

blocks|key|1473021|text|虽然你可以使用类来做任何事情，但是“只出现一次的类”(即ID)和“常规类”之间的分离对于保持你的有意义是非常有用的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1473022|.menu+{+...+}+/*+Err,+how+many+of+those+did+I+have?+*/
#menu+{+...+}+/*+Ahh,+THE+menu.+*/|code-block|syntax|javascript|1473023|entityMap^0|1C|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

While you could use classes for everything, the separation between "classes that only occur once" (i.e. IDs) and "regular classes" is quite useful for keeping your CSS meaningful for yourself.

<pre><code>.menu { ... } /* Err, how many of those did I have? */
#menu { ... } /* Ahh, THE menu. */
</code></pre>

blocks|key|1220745|text|一个ID只能唯一地标识一个DOM元素。类标识一组相关的DOM元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1220746|例如，您可能有一个唯一的导航菜单，由一个ID标识：|1220747|<div+id="nav">...</div>|code-block|syntax|javascript|1220748|其中有许多菜单集，每个菜单集也是唯一标识的，并且属于一个公共类：|1220749|<div+id="nav">
++++<ul+id="content_menu"+class="menu">...</ul>
++++<ul+id="contact_menu"+class="menu">...</ul>
++++<ul+id="personal_menu"+class="menu">...</ul>
</div>|1220750|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/HTMLDOM/default.asp^0|D|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

An ID identifies exactly one <a href="http://www.w3schools.com/HTMLDOM/default.asp" rel="noreferrer">DOM</a> element, uniquely. A class identifies a group of related DOM elements.

For example, you might have a single, unique nav menu, identified by an ID:

<pre><code>&lt;div id="nav"&gt;...&lt;/div&gt;
</code></pre>

and within it have a number of menu sets, each of which is also uniquely identified and which belongs to a common class:

<pre><code>&lt;div id="nav"&gt;
 &lt;ul id="content_menu" class="menu"&gt;...&lt;/ul&gt;
 &lt;ul id="contact_menu" class="menu"&gt;...&lt;/ul&gt;
 &lt;ul id="personal_menu" class="menu"&gt;...&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

blocks|key|4437763|text|简短而简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437764|类可以根据需要使用任意多次(并由句点定义)。Ids只能用于一个元素(并由井号定义)。|4437765|<style>
++++.class+{
++++++++font-size:+3em;
++++}
++++#id+{
++++++++font-size:+3em;
++++}
</style>

<body>

<span+class="class">I+am+a+class

<span+class="class">Look+at+me,+also+a+class

<span+id="id">I+am+special,+you+can+only+have+one+of+me+or+I+do+not+meet+XHTML+standards|code-block|syntax|javascript|4437766|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Short and simple:

Classes may be used as many times as needed (and are defined by a period).
Ids can only be used on ONE element (and are defined by a pound).

<pre><code>&lt;style&gt;
 .class {
 font-size: 3em;
 }
 #id {
 font-size: 3em;
 }
&lt;/style&gt;

&lt;body&gt;

&lt;span class="class"&gt;I am a class&lt;/span&gt;

&lt;span class="class"&gt;Look at me, also a class&lt;/span&gt;

&lt;span id="id"&gt;I am special, you can only have one of me or I do not meet XHTML standards&lt;/span&gt;
</code></pre>

Where can I use ids and classes? What is the difference between them? Is there any need that we should compulsorily use ids in our CSS?

What is the difference between classes and IDs in CSS? Explain with example of where to use

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在哪里可以使用ids和类？它们之间的区别是什么？我们有必要在CSS中强制使用in吗？

问CSS中的classes和IDs有什么区别？举例说明在何处使用
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的classes和IDs有什么区别？举例说明在何处使用EN