10

重複の可能性:
1 つの CSS ID セレクターに応答する同じ ID を持つ複数の要素

以下は、私がテストしていて混乱したサンプルコードです。誰もが使用できる、またはIDごとに1回だけ使用する必要があると言っていますが、私はそれを複数回使用している睾丸を持っていますが、正しい出力が得られます。

私は何をすべきか？

この例では、クラスと同じように動作しています

コード：

<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 セレクターを 1 つのページで 2 回使用してはならない理由を教えてください。

4

5 に答える 5

18

An id must be unique in a page. Use a class if you want to describe a group of elements.

why we should not use id selector two times in a page while its working fine.

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.

于 2012-06-18T09:08:02.793 に答える
7

製品で例えると分かりやすいと思います。シリアル番号がシリアル番号のように機能することを想像してみてください。IDつまり、一意である必要があります。このようにして、何百万もの同等のコピーを持つ製品を識別できます。

次に、製品コードとして想像してくださいclass。たとえば、バーコードにすることができます。スーパーマーケットでは、すべての同等の製品に同じバーコードがあり、光学式リーダーで読み取ることができます。

したがって、anIDは一意の識別子であり、aclassは要素のグループをグループ化します。

しかしID、HTML/CSS で同じものを使用している場合、完璧な結果が得られIDます。

理由番号 1:

将来、Javascript を使用する必要があり、特定の要素を操作する必要があり、それに重複した があるID場合、コードは期待される結果を生成しません。

理由その2

コードは W3C によって検証されません。つまり、ブラウザー間での Web サイトの互換性に頭を悩ませる可能性があります。あるブラウザでは問題なく動作し、他のブラウザでは問題なく動作します。

実際の例を使用して、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>

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>

そのため、1 つの要素だけを更新する場合は、固有の が必要IDです。

この説明を使用して、 と の違いをよりよく理解していただければ幸いIDですclass。

于 2012-06-18T12:27:11.553 に答える
2

それは機能していますが、それはIDが使用されることを意図した方法ではありません（HTML仕様による）。IDは、1つのオブジェクトのみを参照する必要があります。複数のオブジェクトの記述は、idではなくclassを使用して行う必要があります。

于 2012-06-18T09:10:30.213 に答える
1

HTML が有効であることを確認するには、一意の ID を使用する必要があります。

この背後にある理由は、一意の要素を識別するために ID が使用されるという単純なものです。

無効であってもページはレンダリングされますが、実際の最大の問題は、ID が一意であるという前提で動作するように JavaScript やその他のライブラリが最適化されていることです。 jQuery

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

最初の要素のみが非表示になります。これは、ID で選択すると単一のアイテムのみが返され、単一の要素が見つかると、クエリが短絡されて単一の要素が返されるためです。これを知らないと、一見奇妙な動作が発生し、欠陥の診断が困難になる可能性があります。

于 2012-06-18T09:11:54.267 に答える
0

正常に動作しているときに、ページで id セレクターを 2 回使用してはならない理由

すべてのブラウザで正常に動作するかどうかわからないためです。

仕様では、ID はページ内で一意である必要があると規定されているため、ブラウザが重複した ID を見つけると、可能な限り処理しようとします。ほとんどのブラウザーは、最初の要素にのみ ID を使用して処理しているように見えますが、要素に id 属性を残して、CSS が引き続き機能するようにしていますが、すべてのブラウザーがそのように処理するという保証はありません。

ブラウザー ベンダーが異なれば、不適切なマークアップを処理するための戦術も異なります。また、各ベンダーは「新しく、より優れた」方法を見つけるため、通常、不適切なマークアップは可能な限り多くの異なる方法で処理されます。

于 2012-06-18T10:11:43.600 に答える