Unten ist der Beispielcode, den ich getestet habe und ich bin verwirrt. Jeder sagt, dass wir verwenden können, oder wir sollten nur einmal pro ID verwenden, aber ich habe Hoden, die es mehrmals verwenden, aber es gibt mir die richtige Ausgabe.
Was soll ich tun?
Es funktioniert irgendwie wie Klasse für mich in diesem Beispiel
code:
%Vor%Bitte sehen Sie sich den obigen Code an und antworten Sie mir, warum wir den ID-Selektor nicht zweimal auf einer Seite verwenden sollten, solange er funktioniert.
Eine ID muss auf einer Seite eindeutig sein. Verwenden Sie eine Klasse, wenn Sie eine Gruppe von Elementen beschreiben möchten.
Warum sollten wir den ID-Selektor nicht zweimal auf einer Seite verwenden, solange er funktioniert?
Sie machen einen Fehler und abhängig von jedem Browser, der die Seite jemals anzeigen wird, um sie zu kompensieren. Sie können nicht sicher sein, dass sie alle werden.
Ich denke, der leichtere Weg zu verstehen ist eine Analogie mit einem Produkt. Stellen Sie sich vor, ein ID funktioniert wie eine Seriennummer, dh es muss eindeutig sein. Auf diese Weise können Sie ein Produkt identifizieren, das Millionen von Kopien enthält.
Stellen Sie sich dann class als Produktcode vor, z. B. den Barcode. In einem Supermarkt haben alle gleichartigen Produkte den gleichen Barcode, der vom optischen Leser gelesen werden kann.
Also ist ein ID ein eindeutiger Identifikator und ein class gruppiert eine Gruppe von Elementen.
Aber wenn ich das gleiche ID in meinem HTML / CSS verwende, bekomme ich ein perfektes Ergebnis, warum sollte ich mir Sorgen machen über das einzigartige ID s?
Grund Nummer 1:
Wenn Sie in Zukunft Javascript verwenden müssen und ein bestimmtes Element manipuliert werden muss und es eine duplizierte ID hat, wird Ihr Code nicht das erwartete Ergebnis erzeugen.
Grund Nummer 2
Ihr Code wird nicht von W3C validiert, was bedeutet, dass Sie Probleme mit der Kompatibilität Ihrer Website mit Browsern haben können. Es kann in einem Browser gut funktionieren und in anderen nicht.
Stellen Sie sich anhand eines realen Beispiels vor, dass Sie den Text dieses Elements dynamisch mit Javascript aktualisieren möchten:
%Vor%Mit Javascript / JQuery verwenden Sie einen Code wie folgt:
%Vor% Und dann wird der Text des Elements <blockquote id="exampleID1"> aktualisiert, aber das untere Element wird auch aktualisiert, weil es das gleiche ID hat.
Wenn Sie also nur ein Element aktualisieren möchten, müssen sie ein eindeutiges ID s haben.
Ich hoffe, Sie können diese Erklärung verwenden, um den Unterschied zwischen ID und class besser zu verstehen.
Sie sollten eindeutige IDs verwenden, um sicherzustellen, dass der HTML-Code gültig ist.
Der Grund dafür ist einfach, dass IDs dazu verwendet werden, einzigartige Elemente zu identifizieren.
Die Seite wird zwar weiterhin gerendert, obwohl sie ungültig ist, aber das größte praktische Problem besteht darin, dass JavaScript und andere Bibliotheken so optimiert sind, dass IDs eindeutig sind, wenn Sie alle Elemente mit einer ID abrufen und ausblenden möchten sie z mit jQuery
%Vor%Nur das erste Element wird ausgeblendet, da die Auswahl durch die ID nur ein einzelnes Element zurückgeben soll. Sobald ein einzelnes Element gefunden wurde, wird die Abfrage kurzgeschlossen, um das einzelne Element zurückzugeben. Ohne dies zu wissen, können Sie scheinbar seltsames Verhalten und schwer zu diagnostizierende Defekte bekommen.
Warum sollten wir den ID-Selektor nicht zweimal während einer Seite verwenden? funktioniert gut
Weil Sie nicht wissen, ob es in jedem Browser funktioniert.
Die Spezifikationen besagen, dass eine ID auf der Seite eindeutig sein muss. Wenn also Browser Ihre doppelten IDs finden, versuchen sie, sie so gut wie möglich zu handhaben. Die meisten Browser scheinen damit umzugehen, indem sie die Identität nur für das erste Element verwenden, aber das Attribut id auf den Elementen belassen, so dass Ihr CSS immer noch funktioniert, aber es gibt keine Garantie, dass alle Browser es so handhaben .
Verschiedene Browser-Anbieter verwenden unterschiedliche Taktiken für die Handhabung von falschem Markup, und jeder Anbieter findet einen "neuen, besseren" Weg, so dass falsches Markup in der Regel auf so viele verschiedene Arten wie möglich gehandhabt wird.
Tags und Links html css css-selectors