Question

可能重复：
Several elements with the same ID responding to one CSS ID selector

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

我该怎么办？

在这个例子中，对我来说，它有点像班级一样

代码：

<html>
<head>
<style>

#exampleID1 { background-color: blue; } 
#exampleID2 { text-transform: uppercase; } 

</style>
</head>
<body>
<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>
<p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.</p>

<address id="exampleID1">

Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>


<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>

</body>
</html>

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

Answer 1

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

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

您正在制作错误，并且会根据每个浏览器查看该页面以进行补偿。你不能确定他们都会。

Answer 2

我认为更容易理解的方法是对产品进行类比。想象一下，ID的作用类似于序列号，换句话说，它必须是唯一的，这样您就可以识别出具有数百万份相同副本的产品。

然后，想象class作为产品代码，例如可以是条形码。在超市中，所有相同的产品都具有相同的条形码，可由光学读取器读取。

因此，ID是唯一标识符，class组合了一组元素。

但如果我在HTML / CSS中使用相同的ID我会得到一个完美的结果，为什么我要担心独特的ID？

原因1：

将来，如果您需要使用Javascript，并且需要操作特定元素并且它具有重复的ID，则您的代码将不会生成预期结果。

原因2

您的代码不会受到W3C的限制，这意味着您可能会对浏览器的网站兼容性感到头痛。它可以在一个浏览器中正常工作，而在其他浏览器中也可以。

使用一个真实的例子，想象一下你想使用Javascript，这个元素的文本进行dinam更新：

<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>

使用Javascript / JQuery，您将使用如下代码：

$("#exampleID1").html("Changing element content");

然后将更新元素<blockquote id="exampleID1">的文本，但下面的元素也会更新，因为它具有相同的ID。

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

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

我希望您能够使用此解释更好地了解ID和class之间的区别。

Answer 3

它正在工作，但这不是ID的使用方式（根据HTML规范）。 ID必须仅指一个对象。描述多个对象必须用class来完成，而不是id。

Answer 4

您应该使用唯一ID来确保HTML有效。

这背后的原因仅仅是Ids用于识别独特的元素。

尽管页面无效，页面仍然会呈现，但最大的实际问题是JavaScript和其他库已经过优化，假设Ids是唯一的，所以，如果你试图用Id获取所有元素并隐藏他们如使用jQuery

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

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

Answer 5

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

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

规范说id必须在页面中是唯一的，所以当浏览器找到你的重复id：s时，他们会尝试尽可能地处理它。大多数浏览器似乎通过仅为第一个元素使用标识来处理它，但是在元素上保留id属性以便CSS仍然有效，但不能保证所有浏览器都能以这种方式处理它

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

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

5 个答案: