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

时间:2012-06-18 09:06:28

标签: css html css-selectors

  

可能重复:
  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选择器两次,而它的工作正常。

5 个答案:

答案 0 :(得分:17)

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

  

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

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

答案 1 :(得分:6)

我认为更容易理解的方法是对产品进行类比。想象一下,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。

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

答案 2 :(得分:2)

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

答案 3 :(得分:1)

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

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

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

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

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

答案 4 :(得分:0)

  

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

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

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

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