Können mehrere HTML-Elemente dieselbe ID haben und dennoch auf einen CSS-Selektor reagieren?

Element-IDs und Mehrfachantworten in CSS-Selektoren

In HTML sollte jedes Element ein eindeutiges ID-Attribut innerhalb eines Dokuments haben. Es stellt sich jedoch häufig die Frage: Können mehrere Elemente denselben ID-Wert haben und auf einen einzigen CSS-ID-Selektor reagieren?

W3C-Dokumentation

Laut der W3C-Dokumentation „Keine zwei ID-Attribute können den gleichen Wert haben … ein ID-Attribut kann verwendet werden, um sein Element eindeutig zu identifizieren.“ Dies deutet darauf hin, dass die Verwendung derselben ID für mehrere Elemente keine gültige Praxis ist.

Browserverhalten

Trotz der W3C-Empfehlung tolerieren Browser häufig ungültiges HTML und versuchen, damit umzugehen Es. Zum Beispiel im folgenden Beispiel:

#red {
  color: red;
}

<p>

Beide Absätze werden in Rot angezeigt, obwohl sie dieselbe ID haben. Dies liegt daran, dass Browser versuchen, „im Stillen zu scheitern“, indem sie die Absicht des Entwicklers erraten und den ungültigen HTML-Code entsprechend interpretieren.

Risiken und Einschränkungen

Während Browser die Seite möglicherweise korrekt darstellen Im obigen Szenario kann ein Abweichen von der HTML-Spezifikation zu unvorhergesehenen Nebenwirkungen führen. Wenn Sie beispielsweise document.getElementById('red') verwenden, wird nur das erste passende Element zurückgegeben. Darüber hinaus ist das Testen in verschiedenen Browsern von entscheidender Bedeutung, um die Konsistenz sicherzustellen.

Vermeiden Sie gleiche IDs für CSS-Selektoren

Als bewährte Methode sollten Sie vermeiden, dieselbe ID für mehrere Elemente zu verwenden. Erwägen Sie stattdessen die Verwendung von Klassennamen, um auf Elemente abzuzielen, die ähnliche Stile aufweisen. Klassennamen wurden speziell für diesen Zweck entwickelt und stellen sicher, dass jedes Element eine eindeutige Kennung hat.

Alternative für mehrere Elemente mit derselben ID

Bei Auswahl mehrerer Elemente mit derselben ID ist unbedingt erforderlich. Erwägen Sie die Verwendung eines Attributselektors:

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

Dieser Ansatz wird jedoch in Internet Explorer 7 und nicht unterstützt unten.

Das obige ist der detaillierte Inhalt vonKönnen mehrere HTML-Elemente dieselbe ID haben und dennoch auf einen CSS-Selektor reagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!