Heim > Web-Frontend > CSS-Tutorial > Können mehrere HTML-Elemente dieselbe ID haben und was sind die Konsequenzen?

Können mehrere HTML-Elemente dieselbe ID haben und was sind die Konsequenzen?

Barbara Streisand
Freigeben: 2024-12-25 06:18:16
Original
382 Leute haben es durchsucht

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

Können mehrere Elemente denselben ID-Selektor verwenden?

Trotz der expliziten Richtlinien des W3C, die besagen, dass ID-Attribute eindeutig sein müssen, kommt es bei Browsern häufig zu Problemen unterschiedliche Verhaltensweisen bei der Begegnung mit doppelten IDs.

Das bereitgestellte Beispiel veranschaulicht diese Diskrepanz, bei der zwei Elemente mit derselben ID vorhanden sind auf den CSS-Selektor reagieren. Dies ist in erster Linie auf die Tendenz von Browsern zurückzuführen, „stillschweigend zu versagen“ und zu versuchen, die Absicht des Entwicklers zu interpretieren, selbst wenn diese gegen HTML-Standards verstößt.

Es ist jedoch wichtig zu beachten, dass ein Abweichen von den Spezifikationen zu unvorhergesehenen Konsequenzen führen kann :

  • document.getElementById('red') gibt damit nur das erste Element zurück ID.
  • Es können Probleme mit der browserübergreifenden Kompatibilität auftreten, da die Browserimplementierungen variieren.

Empfehlung:

Für optimale Ergebnisse wird davon dringend abgeraten um Elementen doppelte IDs zuzuweisen. Verwenden Sie stattdessen Klassennamen, um mehrere Elemente mit denselben CSS-Stilen anzusprechen. Klassen sind explizit für diesen Zweck konzipiert.

Alternativer Ansatz für die Auswahl mehrerer IDs:

Bei unbedingtem Bedarf können Attributselektoren verwendet werden, um mehrere Elemente mit derselben ID auszuwählen :

document.querySelectorAll('p[id="red"]');
Nach dem Login kopieren

Dieser Ansatz wird jedoch in IE7 und niedriger nicht unterstützt.

Das obige ist der detaillierte Inhalt vonKönnen mehrere HTML-Elemente dieselbe ID haben und was sind die Konsequenzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage