Plusieurs éléments HTML peuvent-ils partager le même identifiant tout en répondant à un sélecteur CSS ?

ID d'élément et réponses multiples dans les sélecteurs CSS

En HTML, chaque élément doit avoir un attribut d'ID unique dans un document. Cependant, une question courante se pose : plusieurs éléments peuvent-ils partager la même valeur d'ID et répondre à un seul sélecteur d'ID CSS ?

Documentation du W3C

Selon la documentation du W3C, "deux attributs ID ne peuvent pas avoir la même valeur... un attribut ID peut être utilisé pour identifier son élément de manière unique." Cela suggère que l'utilisation du même identifiant pour plusieurs éléments n'est pas une pratique valide.

Comportement du navigateur

Malgré la recommandation du W3C, les navigateurs tolèrent souvent le HTML non valide et tentent de gérer il. Par exemple, dans l'exemple suivant :

#red {
  color: red;
}

<p>

Les deux paragraphes apparaîtront en rouge, même s'ils partagent le même identifiant. Cela se produit parce que les navigateurs tentent « d'échouer silencieusement » en devinant l'intention du développeur et en interprétant le code HTML invalide en conséquence.

Risques et limitations

Alors que les navigateurs peuvent afficher la page correctement dans le scénario ci-dessus, s'écarter de la spécification HTML peut entraîner des effets secondaires imprévus. Par exemple, l'utilisation de document.getElementById('red') ne renverra que le premier élément correspondant. De plus, les tests sur différents navigateurs sont essentiels pour garantir la cohérence.

Évitez les mêmes identifiants pour les sélecteurs CSS

En tant que bonne pratique, évitez d'utiliser le même identifiant pour plusieurs éléments. Envisagez plutôt d’utiliser des noms de classe pour cibler des éléments partageant des styles similaires. Les noms de classe sont spécialement conçus à cet effet et garantissent que chaque élément possède un identifiant unique.

Alternative pour plusieurs éléments avec le même ID

Si vous sélectionnez plusieurs éléments avec le même L'ID est absolument nécessaire, pensez à utiliser un sélecteur d'attribut :

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

Cependant, cette approche n'est pas prise en charge dans Internet Explorer 7 et ci-dessous.

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!