Maison > interface Web > tutoriel CSS > Plusieurs éléments HTML peuvent-ils partager le même identifiant et quelles en sont les conséquences ?

Plusieurs éléments HTML peuvent-ils partager le même identifiant et quelles en sont les conséquences ?

Barbara Streisand
Libérer: 2024-12-25 06:18:16
original
382 Les gens l'ont consulté

Can Multiple HTML Elements Share the Same ID, and What Are the Consequences?

Plusieurs éléments peuvent-ils partager le même sélecteur d'ID ?

Malgré les directives explicites du W3C stipulant que les attributs d'ID doivent être uniques, les navigateurs présentent souvent comportements différents lors de la rencontre d'ID en double.

L'exemple fourni illustre cet écart, où deux éléments avec le même ID répondre au sélecteur CSS. Cela est principalement dû à la tendance des navigateurs à « échouer silencieusement » et à tenter d'interpréter l'intention du développeur, même lorsqu'elle viole les normes HTML.

Cependant, il est crucial de noter que s'écarter des spécifications peut entraîner des conséquences imprévues. :

  • document.getElementById('red') ne renverra que le premier élément avec cela ID.
  • Des problèmes de compatibilité entre navigateurs peuvent survenir à mesure que les implémentations des navigateurs varient.

Recommandation :

Pour des résultats optimaux, il est fortement déconseillé pour attribuer des ID en double aux éléments. Utilisez plutôt des noms de classe pour cibler plusieurs éléments avec les mêmes styles CSS. Les classes sont explicitement conçues à cet effet.

Approche alternative pour la sélection de plusieurs ID :

Si cela est absolument nécessaire, des sélecteurs d'attributs peuvent être utilisés pour sélectionner plusieurs éléments avec le même ID :

document.querySelectorAll('p[id="red"]');
Copier après la connexion

Cependant, cette approche n'est pas prise en charge dans IE7 et versions antérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal