对多个 HTML 标签使用相同的 ID？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11079756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using same ID for multiple HTML tags?
提问by gaurav rathor
Possible Duplicate:
Several elements with the same ID responding to one CSS ID selector
Below is the example code that I was testing and I got confused. Every one says that we can use or we should use only one time per id, but I have testes using using it multiple times but its giving me the correct output.
下面是我正在测试的示例代码，但我很困惑。每个人都说我们可以使用，或者我们应该每个 id 只使用一次，但我的睾丸多次使用它，但它给了我正确的输出。
What should I do?
我该怎么办？
It's kinda working same like class for me in this example
在这个例子中对我来说有点像上课一样
code:
代码：
<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:[email protected]">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>
Please see the above code and answer me that why we should not use id selector two times in a page while its working fine.
请查看上面的代码并回答我为什么我们不应该在页面中使用 id 选择器两次而它工作正常。
回答by Quentin
An id must be unique in a page. Use a class if you want to describe a group of elements.
id 在页面中必须是唯一的。如果要描述一组元素，请使用类。
why we should not use id selector two times in a page while its working fine.
为什么我们不应该在页面中使用 id 选择器两次而它工作正常。
You are making an error and depending on every browser that will ever view the page to compensate for it. You can't be sure they all will.
您正在犯一个错误，并取决于将查看该页面的每个浏览器来弥补它。你不能确定他们都会。
回答by Marcio Mazzucato
I think the easier way to understand is doing an analogy with a product. Imagine that an IDworks like a Serial Number, in other words, it must be unique, this way you can identify a product that have milions of equal copies.
我认为更容易理解的方法是对产品进行类比。想象一个ID像序列号一样的作品，换句话说，它必须是唯一的，这样您就可以识别具有数百万个相同副本的产品。
Then, imagine the classas the Product Code, can be the bar code for example. In a supermarket all equal products have the same bar code to be read by optical reader.
然后，将其想象class为产品代码，例如可以是条形码。在超市中，所有相同的产品都有相同的条形码可供光学阅读器读取。
So, an IDis an unique identifiquer and a classgroups a group of elements.
因此， anID是唯一标识符，并且是class一组元素。
But if i am using the same IDin my HTML/CSS i am get a perfect result, why should i be worried about unique IDs?
但是如果我ID在我的 HTML/CSS 中使用相同的我得到一个完美的结果，我为什么要担心 unique IDs？
Reason number 1:
原因一：
In the future, if you need to use Javascript and if you need to manipulate an specific element and it has a duplicated ID, your code will not generate the expected result.
将来，如果您需要使用 Javascript 并且如果您需要操作特定元素并且它有重复的ID，您的代码将不会生成预期的结果。
Reason number 2
原因二
Your code will not be valited by W3C, what means that you can have headaches with your website's compability accross browsers. It can works fine in one browser and in other not.
您的代码不会受到 W3C 的验证，这意味着您可能会对网站跨浏览器的兼容性感到头疼。它可以在一种浏览器中正常工作，而在其他浏览器中则不能。
Using a real example, imagine that you want to update dinamically, using Javascript, the text of this element:
使用一个真实的示例，假设您想使用 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>
With Javascript/JQuery you will use a code like this:
使用 Javascript/JQuery，您将使用如下代码：
$("#exampleID1").html("Changing element content");
And then the text of the element <blockquote id="exampleID1">will be updated, but the below element will be updated too, because it has the same ID.
然后元素的文本<blockquote id="exampleID1">将被更新，但下面的元素也将被更新，因为它具有相同的ID.
<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>
So, if you want to update just one element, they must have unique IDs.
所以，如果你只想更新一个元素，它们必须有唯一的IDs。
I hope you can use this explanation to understand better the difference between IDand class.
我希望您可以通过这个解释更好地理解ID和之间的区别class。
回答by maxdec
It's working, but that's not the way IDs are meant to be used (according to the HTML specifications). An ID must refer only to one object. Describing multiple objects must be done with class, not id.
它正在工作，但这不是使用 ID 的方式（根据 HTML 规范）。一个 ID 只能引用一个对象。必须使用类而不是 id 来描述多个对象。
回答by StuperUser
You should use unique Ids to ensure the HTML is valid.
您应该使用唯一的 ID 来确保 HTML 有效。
The reasoning behind this is simply that Ids are used to identify unique elements.
这背后的原因很简单，Id 用于标识唯一元素。
The page will still render, despite being invalid, but the biggest practical problem is that JavaScript and other libraries are optimised to work on the assumption that Ids are unique so, if you are trying to fetch all elements with an Id and hide them e.g. using jQuery
尽管页面无效，但该页面仍会呈现，但最大的实际问题是 JavaScript 和其他库经过优化以假设 Id 是唯一的，因此，如果您尝试使用 Id 获取所有元素并隐藏它们，例如使用jQuery
$('#exampleID1').hide();
Only the first element will be hidden, since to select by Id should only return a single item and once a single element is found the query is short circuited to return the single element. Without knowing this you can get some seemingly odd behaviour and hard to diagnose defects.
只有第一个元素会被隐藏，因为按 Id 选择应该只返回单个项目，一旦找到单个元素，查询就会短路以返回单个元素。如果不知道这一点，您可能会出现一些看似奇怪的行为并且难以诊断缺陷。
回答by Guffa
why we should not use id selector two times in a page while its working fine
为什么我们不应该在页面中使用 id 选择器两次而它工作正常
Because you don't know if it's working fine in every browser.
因为你不知道它是否在每个浏览器中都能正常工作。
The specifications says that an id has to be unique in the page, so when browsers find your duplicate id:s they will try to handle it as best they can. Most browsers seem to handle it by using the identity only for the first element, but leaving the id attribute on the elements so that your CSS still works, but there is no guarantee that allbrowsers handle it that way.
规范说一个 id 在页面中必须是唯一的，所以当浏览器找到你的重复 id:s 时，他们会尽可能地处理它。大多数浏览器似乎通过仅对第一个元素使用标识来处理它，但将 id 属性保留在元素上，以便您的 CSS 仍然有效，但不能保证所有浏览器都以这种方式处理它。
Different browser vendors use different tactics for handling incorrect markup, and each vendor finds a "new, better" way, so incorrect markup is typically handled in as many different ways as possible.
不同的浏览器供应商使用不同的策略来处理不正确的标记，每个供应商都会找到一种“新的、更好的”方式，因此通常以尽可能多的不同方式处理不正确的标记。
