blocks|key|720673|text|不是的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|720674|元素ID在整个文档中应该是唯一的。|720675|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>No.</p>

<p>Element IDs should be unique within the entire document.</p>


blocks|key|720751|text|我认为有些东西应该是唯一的，还是必须是唯一的(即由web浏览器强制执行)之间是有区别的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|720752|ID应该是唯一的吗？是。|720753|ID必须是唯一的吗？不能，至少IE和FireFox允许多个元素具有相同的ID。|720754|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>I think there is a difference between whether something SHOULD be unique or MUST be unique (i.e. enforced by web browsers).</p>

<p>Should IDs be unique? YES.</p>

<p>Must IDs be unique? NO, at least IE and FireFox allow multiple elements to have the same ID.</p>


blocks|key|936397|text|不是的。具有相同id的两个元素无效。if是唯一的，如果你想做这样的事情，可以使用一个类。不要忘记，通过使用空格作为分隔符，元素可以有多个类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|936398|<div+class="myclass+sexy"></div>|code-block|syntax|javascript|936399|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>No.  two elements with the same id are not valid.  IDs are unique, if you wish to do something like that, use a class.  Don't forget that elements can have multiple classes by using a space as a delimeter:</p>

<pre><code>&lt;div class="myclass sexy"&gt;&lt;/div&gt;
</code></pre>


blocks|key|720808|text|至少在Chrome+26.0.1410.65、Firefox+19.0.2和Safari+6.0.3上，如果有多个元素具有相同的ID，jquery选择器(至少)将返回具有该ID的第一个元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|720809|例如：|720810|<div+id="one">first+text+for+one</div>
<div+id="one">second+text+for+one</div>|code-block|syntax|javascript|720811|和|720812|alert($('#one').size());|720813|有关测试，请参阅http://jsfiddle.net/RuysX/。|offset|length|720814|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/RuysX/^0|0|0|0|0|0|8|Q|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>And for what it's worth, on Chrome 26.0.1410.65, Firefox 19.0.2, and Safari 6.0.3 at least, if you have multiple elements with the same ID, jquery selectors (at least) will return the first element with that ID.</p>

<p>e.g.</p>

<pre><code>&lt;div id="one"&gt;first text for one&lt;/div&gt;
&lt;div id="one"&gt;second text for one&lt;/div&gt;
</code></pre>

<p>and</p>

<pre><code>alert($('#one').size());
</code></pre>

<p>See <a href="http://jsfiddle.net/RuysX/" rel="nofollow">http://jsfiddle.net/RuysX/</a> for a test.</p>


blocks|key|720888|text|使用特定于HTML5的HTML+validator+at+w3.org，ID必须是唯一的|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|720889|请考虑以下几点：|720890|<!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>|code-block|syntax|javascript|720891|验证器响应为...|720892|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>|720893|..。但是OP特别说明了--不同的元素类型怎么办。因此，考虑下面的HTML...|720894|<!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>|720895|..。验证器的结果是...|720896|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|720897|结论：|720898|在任何一种情况下(相同的元素类型或不同的元素类型)，如果id被多次使用，则认为它不是有效的HTML5。|720899|entityMap|0|LINK|mutability|MUTABLE|url|http://validator.w3.org/#validate_by_input^0|B|O|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1E|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1F|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1H|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|C|$]]|$1|U|3|V|5|H|7|1J|8|@]|9|@]|C|$I|J]]|$1|W|3|X|5|6|7|1K|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]]]

<p>Well, using the <a href="http://validator.w3.org/#validate_by_input" rel="nofollow">HTML validator at w3.org</a>, specific to HTML5, IDs must be unique</p>

<p>Consider the following...</p>

<pre><code>&lt;!DOCTYPE html&gt; 
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;MyTitle&lt;/title&gt; 
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="x"&gt;Barry&lt;/div&gt;
        &lt;div id="x"&gt;was&lt;/div&gt;
        &lt;div id="x"&gt;here&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>the validator responds with ...</p>

<pre><code>Line 9, Column 14: Duplicate ID x.      &lt;div id="x"&gt;was&lt;/div&gt;
Warning Line 8, Column 14: The first occurrence of ID x was here.       &lt;div id="x"&gt;Barry&lt;/div&gt;
Error Line 10, Column 14: Duplicate ID x.       &lt;div id="x"&gt;here&lt;/div&gt;
Warning Line 8, Column 14: The first occurrence of ID x was here.       &lt;div id="x"&gt;Barry&lt;/div&gt;
</code></pre>

<p>... but the OP specifically stated - what about different element types.  So consider the following HTML...</p>

<pre><code>&lt;!DOCTYPE html&gt; 
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;MyTitle&lt;/title&gt; 
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="x"&gt;barry
            &lt;span id="x"&gt;was here&lt;/span&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>... the result from the validator is...</p>

<pre><code>Line 9, Column 16: Duplicate ID x.          &lt;span id="x"&gt;was here&lt;/span&gt;
Warning Line 8, Column 14: The first occurrence of ID x was here.       &lt;div id="x"&gt;barry
</code></pre>

<h2>Conclusion:</h2>

<p>In either case (same element type, or different element type), if the id is used more than once it is not considered valid HTML5.</p>


blocks|key|936803|text|是的，他们可以。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|936804|我不知道这些网页是不是都过时了，不过打开youtube看看这个html就知道了。尝试检查推荐的视频，您将看到它们都具有相同的Id和重复结构，如下所示：|936805|<span+id="video-title"+class="style-scope+ytd-compact-radio-renderer"+title="Mix+-+LARA+TACTICAL">|code-block|syntax|javascript|936806|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Yes they can.</p>

<p>I don't know if all these anwers are outdated, but just open youtube and inspect the html. Try to inspect the suggested videos, you'll see that they all have the same Id and repeating structure as follows:</p>

<pre><code>&lt;span id="video-title" class="style-scope ytd-compact-radio-renderer" title="Mix - LARA TACTICAL"&gt;
</code></pre>


blocks|key|936701|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|936702|<div+id="one">first+text+for+one</div>
<div+id="one">second+text+for+one</div>

var+ids+=+document.getElementById('one');|code-block|syntax|javascript|936703|936704|ids只包含第一个div元素。因此，即使有多个元素具有相同的id，document对象也只返回第一个匹配项。|936705|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="one"&gt;first text for one&lt;/div&gt;
&lt;div id="one"&gt;second text for one&lt;/div&gt;

var ids = document.getElementById('one');</code></pre>
</div>
</div>
</p>

<p>ids contain only first div element. So even if there are multiple elements with the same id, the document object will return only first match.</p>


blocks|key|936873|text|可能会有重复的ids。我试着从javascript添加todoitem，它成功地添加到dom中。这是html代码和javscript代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|936874|📷|atomic|offset|length|936875|​|936876|936877|936878|936879|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/35284cbe232a285f88e79a42ec043447.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/a9c2d8c3f5ea52b3cad47d389ef9aab0.png^0|0|0|1|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@$E|Y|F|Z|1|10]]|A|$]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|C|5|D|7|13|8|@]|9|@$E|14|F|15|1|16]]|A|$]]|$1|K|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S|T|-4]]|U|$5|O|P|Q|A|$R|V|T|-4]]]]

<p>It's possible to have duplicate ids. I have tried adding the todoitem from javascript and it added to the dom successfully. This is the html code and javscript code.
<a href="https://i.stack.imgur.com/4viee.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4viee.png" alt="I have tried adding the todoitem from javascript and it added to the dom successfully. This is the html code." /></a></p>
<p><a href="https://i.stack.imgur.com/mXJJV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mXJJV.png" alt="This is the javascript code." /></a></p>


blocks|key|720692|text|不，ID必须是唯一的。为此，您可以使用类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|720693|<div+class="a"+/><div+class="a+b"+/><span+class="a"+/>

div.a+{font:+...;}
/*+or+just:+*/
.a+{prop:+value;}|code-block|syntax|javascript|720694|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Nope, IDs have to be unique. You can use classes for that purpose</p>

<pre><code>&lt;div class="a" /&gt;&lt;div class="a b" /&gt;&lt;span class="a" /&gt;

div.a {font: ...;}
/* or just: */
.a {prop: value;}
</code></pre>


blocks|key|720715|text|是否可以在一个班级中有多个学生具有相同的名单/Id号？在HTML中，id属性是这样的。您可以对它们使用相同的类。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|720716|<div+class="a+b+c"></div>
<div+class="a+b+c+d"></div>|code-block|syntax|javascript|720717|诸若此类。|720718|entityMap^0|Y|2|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>Is it possible to have more than one student in a class having same Roll/Id no? In HTML<code>id</code> attribute is like so. You may use same class for them. e.g:</p>

<pre><code>&lt;div class="a b c"&gt;&lt;/div&gt;
&lt;div class="a b c d"&gt;&lt;/div&gt;
</code></pre>

<p>And so on.</p>


blocks|key|721046|text|我们可以使用类名而不是id。html+id应该是唯一的，但类不是唯一的。在检索数据时，使用类名可以减少js文件中的代码行数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|721047|​|721048|$(document).ready(function+()
{
++++$(".class_name").click(function+()
++++{
++++++++//code
++++});
});|code-block|syntax|javascript|721049|721050|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>We can use class name instead of using id. html id are should be unique but classes are not. when retrieving data using class name can reduce number of code lines in your js files.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function ()
{
    $(".class_name").click(function ()
    {
        //code
    });
});</code></pre>
</div>
</div>
</p>


blocks|key|936643|text|我认为你不能这样做，因为Id是唯一的，你必须将它用于一个元素。您可以使用class来实现此目的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|936644|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I think you can't do it because Id is unique you have to use it for one element . You can use class for the purpose</p>


<p>Can multiple HTML elements have the same ID if they're of different element types? Is a scenario like this valid? Eg:</p>
<pre><code>div#foo
span#foo
a#foo
</code></pre>


Can multiple different HTML elements have the same ID if they're different elements?

HTML5

如果多个HTML元素具有不同的元素类型，那么它们可以具有相同的ID吗？这样的场景是有效的吗？例如：div#foospan#fooa#foo

问如果多个不同的HTML元素是不同的元素，那么它们可以具有相同的ID吗？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果多个不同的HTML元素是不同的元素，那么它们可以具有相同的ID吗？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果多个不同的HTML元素是不同的元素，那么它们可以具有相同的ID吗？
EN