Css 对多个HTML标记使用相同的ID？

可能重复：

下面是我正在测试的示例代码，我感到困惑。每个人都说我们可以使用，或者每个id只应该使用一次，但我有测试人员多次使用它，但它给了我正确的输出

我该怎么办

在这个例子中，对我来说，它的工作原理和课堂一样

代码：

#示例ID1{背景色：蓝色；}
#exampleID2{文本转换：大写；}
此段落的id名称为“exampleID1”，背景为蓝色CSS定义
此段落的id名称为“exampleID2”，并已将其文本转换为大写字母


地址：迪斯尼乐园564号信箱

电话：+12345678
这是一个长的报价这里是一个长的报价这里是一个长的报价这里是一个长的报价这里是一个长的报价这里是一个长的报价这里是一个长的报价这里是一个长的报价。

---

请查看上面的代码，并回答我为什么不应该在一个页面中使用id选择器两次，而它工作正常。

id在页面中必须是唯一的。如果要描述一组元素，请使用类

为什么我们不应该在一个页面中使用id选择器两次，而它工作正常

---

你犯了一个错误，这取决于每一个浏览网页的浏览器来弥补它。你不能确定他们都会这样做。

这是可行的，但这不是使用ID的方式（根据HTML规范）。 ID只能引用一个对象。

---

描述多个对象必须使用类，而不是id。您应该使用唯一的id来确保HTML有效

这背后的原因很简单，ID用于识别唯一的元素

尽管页面无效，但页面仍会呈现，但最大的实际问题是，JavaScript和其他库在假设Id是唯一的情况下进行了优化，因此，如果您尝试使用Id获取所有元素并隐藏它们，例如使用jQuery

$('#exampleID1').hide();

只有第一个元素将被隐藏，因为“按Id选择”只应返回单个项目，一旦找到单个元素，查询将短路以返回单个元素。如果不知道这一点，您可能会出现一些看似奇怪的行为和难以诊断的缺陷

为什么我们不应该在一个页面中使用id选择器两次，而它是 工作正常

因为你不知道它是否在每个浏览器中都能正常工作

规范规定，id在页面中必须是唯一的，因此当浏览器发现重复的id:s时，他们会尽力处理。大多数浏览器似乎只通过为第一个元素使用标识来处理它，但将id属性保留在元素上，这样CSS仍然可以工作，但不能保证所有浏览器都是这样处理的

---

不同的浏览器供应商使用不同的策略来处理不正确的标记，每个供应商都会找到一种“新的、更好的”方法，因此通常会以尽可能多的不同方式来处理不正确的标记。

我认为更容易理解的方法是与产品进行类比。假设一个

ID

像序列号一样工作，换句话说，它必须是唯一的，这样你就可以识别出一个拥有百万份相同拷贝的产品

然后，将

类

想象为产品代码，例如条形码。在超市里，所有相同的产品都有相同的条形码，可以通过光学阅读器读取

因此，

ID

是唯一的标识符，

class

对一组元素进行分组

但是如果我在HTML/CSS中使用相同的

ID

，我会得到一个完美的结果，为什么我要担心惟一的

ID

s呢

原因1:

将来，如果您需要使用Javascript，并且需要操作特定元素，并且该元素具有重复的

ID

，那么您的代码将不会生成预期的结果

原因编号2

您的代码不会被W3C验证，这意味着您可能会对网站的兼容浏览器感到头疼。它可以在一个浏览器中正常工作，而在另一个浏览器中则无法正常工作

使用一个真实的示例，假设您希望使用Javascript以友好的方式更新此元素的文本：

<blockquote id="exampleID1">
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

然后元素

的文本将被更新，但下面的元素也将被更新，因为它具有相同的

ID

<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>

此段落的id名称为“exampleID1”，背景为蓝色CSS定义

因此，如果只想更新一个元素，它们必须具有唯一的

ID

s

---

我希望您可以使用这个解释来更好地理解

ID

和

class

之间的区别，特别是JavaScript将根据您对重复ID的处理而中断。事实上，只有一个具有给定ID的元素存在，允许浏览器在遍历树时进行各种假设/优化。感谢您澄清我的疑问。CSS并不真正关心您是否使用ID和类。我很在乎。Javascript很重要。你能做并不意味着你应该做。但是，

$（'*#exampleID1'）.hide（）。请注意。嗨，如果我使用document.getElementbyId（“结果”）.innerhtml=d；我想要多个id=“result”的div。什么是好的解决方法？@KalaJ，我认为使用类um可以解决这个问题
$("#exampleID1").html("Changing element content");

<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>