複数の HTML 要素が同じ ID を共有しても CSS セレクターに応答できますか?

CSS セレクターの要素 ID と複数の応答

HTML では、各要素がドキュメント内で一意の ID 属性を持つ必要があります。ただし、一般的な疑問が生じます。複数の要素が同じ ID 値を共有し、単一の CSS ID セレクターに応答できますか?

W3C ドキュメント

W3C ドキュメントによると、 「2 つの ID 属性が同じ値を持つことはできません...ID 属性はその要素を一意に識別するために使用できます。」これは、複数の要素に同じ ID を使用することが有効ではないことを示唆しています。

ブラウザの動作

W3C の推奨にもかかわらず、ブラウザは無効な HTML を許容し、処理しようとすることがよくあります。それ。たとえば、次の例では、

#red {
  color: red;
}

<p>

同じ ID を共有している場合でも、両方の段落が赤色で表示されます。これは、ブラウザが開発者の意図を推測し、それに応じて無効な HTML を解釈することで「サイレントに失敗」しようとするために発生します。

リスクと制限

ブラウザはページを正しく表示する可能性がありますが、上記のシナリオでは、HTML 仕様から逸脱すると、予期しない副作用が発生する可能性があります。たとえば、document.getElementById('red') を使用すると、最初に一致した要素のみが返されます。さらに、一貫性を確保するには、異なるブラウザ間でテストすることが重要です。

CSS セレクターに同じ ID を使用しないでください

ベスト プラクティスとして、複数の要素に同じ ID を使用することは避けてください。代わりに、同様のスタイルを共有する要素をターゲットとするクラス名を使用することを検討してください。クラス名はこの目的のために特別に設計されており、各要素が一意の識別子を持つようにします。

同じ ID を持つ複数の要素の代替

同じ ID を持つ複数の要素を選択する場合ID は絶対に必要です。属性セレクターの使用を検討してください:

document.querySelectorAll('p[id="red"]');

ただし、このアプローチは Internet Explorer 7 ではサポートされていません。以下。

以上が複数の HTML 要素が同じ ID を共有しても CSS セレクターに応答できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。