HTML で重複 ID が機能する場合があるのはなぜですか? ベスト プラクティスは何ですか?

<p>

<p>同じ ID を持つ複数の要素が CSS セレクターに応答する

<p>単一の Web ページ内で複数の要素に同じ ID を割り当てることは一般的によくない習慣であると考えられています。 W3C のドキュメントによると、ID 属性にはそれぞれの要素を一意に識別するための一意の値が必要です。

<p>ただし、jQuery プラグインの使用などの特定の状況では、誤って ID が重複する可能性があります。驚くべきことに、ブラウザは「サイレントに失敗する」ことでこの状況に対処する傾向があります。これらは、無効な HTML の背後にある意図を解釈し、それに応じて動作を調整しようとします。

<p>たとえば、次のコードを考えてみましょう。

#red {
  color: red;
}

<p>

<p>ID が重複しているにもかかわらず、両方の段落はすべての主要なブラウザで赤色で表示されます。ただし、この動作は保証されておらず、予期しない副作用が発生する可能性があります。

<p>たとえば、document.getElementById('red') を使用して ID で要素にアクセスすると、最初の要素のみが返されます。両方の要素を選択するには、document.querySelectorAll('p[id="red"]') のような属性セレクターを使用する必要があります。ただし、このアプローチは IE7 以前ではサポートされていません。

<p>潜在的な問題を回避するために、CSS で複数の要素をターゲットにする場合は ID の代わりにクラス名を使用することを強くお勧めします。クラス名はこの目的のために明示的に設計されており、すべてのブラウザー間での一貫性が確保されています。

以上がHTML で重複 ID が機能する場合があるのはなぜですか? ベスト プラクティスは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。