如果多个不同的HTML元素是不同的元素，可以拥有相同的ID吗？
是这样的情况有效吗？
div#foo span#foo a#foo 没有。
元素ID在整个文档中应该是唯一的。
我认为是否应该是唯一的或者必须是唯一的（即通过网页浏览器强制执行）是有区别的。
ID应该是唯一的吗？ 是。
必须是唯一的ID？ 不，至lessIE和FireFox允许多个元素具有相同的ID。
两个具有相同ID的元素无效。 ID是唯一的，如果你想做这样的事情，使用一个类。 不要忘记，通过使用空格作为分隔符，元素可以有多个类：
<div class="myclass sexy"></div>
即使元素是不同的types，它可以导致你一些严重的问题…
假设你有3个相同ID的button：
<button id="myid" data-mydata="this is button 1">button 1</button> <button id="myid" data-mydata="this is button 2">button 2</button> <button id="myid" data-mydata="this is button 3">button 3</button>
现在你设置一些jQuery代码来做点击myidbutton时的myid ：
$(document).ready(function () { $("#myid").click(function () { var buttonData = $(this).data("mydata"); // Call interesting function... interestingFunction(); $('form').trigger('submit'); }); });
你会期待什么？ 点击每个button将执行与jQuery单击事件处理程序设置。 不幸的是，这不会发生。 只有第一个button调用点击处理程序。 另外两个点击时什么也不做。 就好像他们根本不是button！
所以总是分配不同的IDs到HTML元素。 这会让你掩盖奇怪的事情。 🙂
<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button> <button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button> <button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>
现在，如果你想单击事件处理程序运行，当任何button被点击时，它将完美工作，如果你改变jQuery代码中的select器使用应用到他们的CSS类如下：
$(document).ready(function () { $(".mybtn").click(function () { var buttonData = $(this).data("mydata"); // Call interesting function... interstingFunction(); $('form').trigger('submit'); }); });
HTML的官方规范指出，id标签必须是唯一的，官方规范还规定，如果可以完成呈现，它必须（即HTML中没有“错误”，只有“无效”HTML）。 所以，以下是id标签在实际中如何工作的 。 他们都是无效的 ，但仍然工作：
这个：
<div id="unique">One</div> <div id="unique">Two</div>
在所有浏览器中呈现良好。 但是，document.getElementById只返回一个对象，而不是一个数组; 你将只能通过id标签select第一个div。 如果您要使用JavaScript更改第一个div的ID，则可以使用document.getElementById（在Chrome，FireFox和IE11上testing）访问第二个ID。 您仍然可以使用其他select方法selectdiv，并且它的id属性将被正确返回。
请注意，上述问题在渲染SVG图像的网站中会出现潜在的安全漏洞，因为SVG允许包含DOM元素，并且还包含id标签（允许通过上传图像的脚本DOMredirect）。 只要SVG在它被replace的元素之前放置在DOM中，图像将接收为其他元素指定的所有JavaScript事件。
就我所知，这个问题目前不在任何人的视野之内，但它是真实的。
这个：
<div id="unique" id="unique-also">One</div>
在所有浏览器中也呈现良好。 但是，如果您尝试使用document.getElementById（'unique-also'），则只会使用您定义的第一个 ID。 在上面的例子中，你将被返回null （在Chrome，FireFox和IE11上testing）。
这个：
<div id="unique unique-two">Two</div>
在所有的浏览器中渲染也很好，但是，不像class标签可以用空格隔开，id标签允许空格，所以上面元素的id实际上是“unique unique-two”，并且要求dom为“unique”或“unique-two”独立返回null，除非在DOM中另行定义（在Chrome，FireFox和IE11上testing）。
多个元素可以具有相同的ID吗？
是的 – 无论它们是否是相同的标记，即使多个元素具有相同的ID，浏览器也将呈现该页面。
这是有效的HTML吗？
不，这个HTML 5.1规范仍然是正确的。 但是，规范还指出getElementById 必须返回具有给定ID的第一个元素 ，使得在无效文档的情况下行为不会被定义。
这种types的无效HTML有什么后果？
当调用getElementById时，大多数（如果不是全部的话）浏览器仍然select具有给定ID的第一个元素。 大多数通过ID查找元素的库都会inheritance此行为。 大多数（如果不是全部的话）浏览器也将idselect器分配的样式（例如#myid ）应用于具有指定ID的所有元素。 如果这是你所期望和打算的，那么就没有意想不到的后果。 如果您期望/打算做其他事情（例如，所有具有该ID的元素都将被返回，或者风格仅适用于一个元素），那么您的期望将不会被满足，任何依赖这些期望的特征都将失败。
结论
当多个元素具有相同的ID时，某些JavaScript库确实会有不符合的期望（请参阅wootscootinboogie关于d3.js 的评论 ）
如果您的代码在您当前的环境中按预期工作，并且这些ID以可预测/可维护的方式使用，则只有两个实际的原因可以考虑不这样做：
- 为了避免您错误的机会，并且当多个元素具有相同的ID时，您使用的某个库确实会出现故障。
- 为了保持您的网站/应用程序与图书馆或服务（或开发人员）的向前兼容性，当多个元素具有相同的ID时，这些元素会发生故障，您将来可能会遇到这种情况。
权力是你的！
至less在Chrome 26.0.1410.65，Firefox 19.0.2和Safari 6.0.3中，如果有多个具有相同ID的元素，那么jqueryselect器（至less）会返回带有该ID的第一个元素。
例如
<div id="one">first text for one</div> <div id="one">second text for one</div>
和
alert($('#one').size());
SLAK的答案是正确的，但作为一个附录注意，x / html规范指定所有id 在（单个）html文档中必须是唯一的。 虽然这不是什么问题，可能会有相同的ID附加到不同的实体跨越多个页面的有效实例。
例：
（服务于现代浏览器）文章＃main-content { 风格单向 }
（服务于传统）div＃main-content { 另辟蹊径 }
可能是一个反模式，但。 只是离开这里作为魔鬼的倡导点。
那么，使用w3.org的HTMLvalidation器 ，特定于HTML5，ID必须是唯一的
考虑以下…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyTitle</title> </head> <body> <div id="x">Barry</div> <div id="x">was</div> <div id="x">here</div> </body> </html>
validation器响应…
Line 9, Column 14: Duplicate ID x. <div id="x">was</div> Warning Line 8, Column 14: The first occurrence of ID x was here. <div id="x">Barry</div> Error Line 10, Column 14: Duplicate ID x. <div id="x">here</div> Warning Line 8, Column 14: The first occurrence of ID x was here. <div id="x">Barry</div>
…但是OP特别指出 – 不同的元素types。 所以考虑下面的HTML …
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyTitle</title> </head> <body> <div id="x">barry <span id="x">was here</span> </div> </body> </html>
validation者的结果是…
Line 9, Column 16: Duplicate ID x. <span id="x">was here</span> Warning Line 8, Column 14: The first occurrence of ID x was here. <div id="x">barry
结论：
在任何一种情况下（相同的元素types或不同的元素types），如果多次使用该id，则不被视为有效的HTML5。
不，ID必须是唯一的。 你可以使用类来达到这个目的
<div class="a" /><div class="ab" /><span class="a" /> div.a {font: ...;} /* or just: */ .a {prop: value;}
是否有可能有一个以上的学生在一个class级有相同的卷/身份证号码？ 在HTML id属性是这样的。 你可以使用相同的类。 例如：
<div class="abc"></div> <div class="abcd"></div>
等等。
我认为你不能这样做，因为Id是唯一的，你必须使用它的一个元素。 你可以用class来达到目的
