Analysieren Sie die Vorteile von class gegenüber id beim Markieren von HTML-Elementen

Es gibt sehr komplexe HTML-Strukturen in Webseiten. Wenn wir CSS verwenden, um verwandte Stile zu definieren, müssen wir entsprechende Flags für diese Strukturen angeben und dann entsprechende CSS-Selektoren schreiben, um ihre Stile zu erhalten. Die beiden am häufigsten verwendeten Annotationsattribute sind ID und Klasse, zum Beispiel:

<p class=”header” id=”header” ></p>

Jetzt gibt es weitere Auswahlmethoden, wie zum Beispiel: Attributselektor warten. Es wird jedoch nicht empfohlen, es zu verwenden. Obwohl die ID und die Klasse mithilfe des Attributselektors weggelassen werden können, gibt es Probleme wie Unannehmlichkeiten bei der späteren Wartung, schlechte Kompatibilität mit frühen Browsern und eine Beeinträchtigung der Rendering-Effizienz des Browsers. Obwohl es also mehr Optionen gibt, empfehle ich dennoch, id und class zusammen mit dem Elementnamen zu verwenden, um CSS-Selektoren zu erstellen.
Was sollte ich zuerst verwenden, da sowohl id als auch class HTML-Strukturen markieren können? Dies wird in diesem Artikel besprochen.

Der Unterschied zwischen Ausweis und Klasse

Erfahrene Freunde können diesen Teil überspringen.

1. Eindeutigkeit und Wiederholbarkeit

id kann nur in der Webseitenstruktur eindeutig sein. Wenn Sie die ID eines Elements als aa angeben, dann in der Webseite Es wird kein HTML-Element mehr mit der ID aa geben. Obwohl leistungsstarke Browser mehrere doppelte IDs unterstützen und entsprechende Stile zuweisen, ist dies im Standard nicht zulässig.

Im Gegenteil, die Klasse kann in der Webseitenstruktur wiederverwendet werden. Sie können die Klasse eines Elements als bb angeben, und Sie können die Klasse des nächsten Elements als bb angeben bb zugleich Stil. Darüber hinaus können Sie für ein Element auch mehrere Klassenattributwerte angeben, sodass Sie die Stile mehrerer Attribute gleichzeitig erhalten.

2. Unterschiedliche Prioritäten in CSS

Im CSS-Selektor ist die Priorität der Anwendung von Stilen auf ID und Klasse unterschiedlich. Die Stilpriorität der ID ist höher als die Stilpriorität der Klasse. Wenn ich den folgenden Stil für ein p mit der ID aa und der Klasse bb spezifiziere:

#aa{background:red;}   
.bb{background:blue;}

Dann durchsuchen Der Monitor wird angezeigt mit rotem Hintergrund.

3. Sprungfunktion

Die Verwendung des ID-Attributs kann die Ankermarkierungssprungfunktion erhöhen. Wenn wir die ID eines p auf der Seite angeben, Dann fügen wir #aa nach der aktuellen URL hinzu und die Seite springt sofort zur Position von p mit der ID aa. Beispiel: Kapitelsprung in der Baidu-Enzyklopädie. Die Klasse hat diese Funktion nicht.

Warum class statt id verwenden

Was sind die Vorteile der Verwendung von class?

1. Reduzieren Sie die Benennung

Wenn ich IDs zum Beschriften verwende, muss ich sie benennen der Struktur einen Namen. Auf Webseiten gibt es viele Strukturen mit demselben Stil und derselben Wirkung (z. B. einheitlicher Schaltflächenstil). Daher schreiben wir einfach einen gemeinsamen Klassenstil und weisen diese Klasse dann allen Strukturen zu, die denselben Stil erfordern.

2. Hochgradig wiederverwendbar

Klasse kann in anderen Strukturen wiederverwendet werden, und mehrere Klassen können auf ein bestimmtes Element angewendet werden, sodass es in hohem Maße wiederverwendet werden kann Klassenstil. Eine extremere praktische Anwendung ist die Atomklasse, zum Beispiel:

.fl{float:left;display:inline;}   
.fr{float:rightright;display:inline;}

Schreiben Sie einige Klassen so klein und prägnant wie möglich und dann für jemanden, der diesen Stil benötigt (zum Beispiel: Das obige Floating) schreibt die Klasse direkt in das Element (zum Beispiel: class="fl").
Für allgemeine Anwendungen müssen Sie für einige Strukturen, die denselben Stil erfordern, nur einen Stil schreiben und diesen Strukturen dann dieselbe Klasse zuweisen. Dadurch wird ein hohes Maß an Wiederverwendung des Stilcodes erreicht und die Änderung ist bequemer .

3. Niedrige Priorität

Die Verwendung dieser Funktion mit niedriger Priorität kann das Debuggen und die Stilabdeckung erleichtern.

Wenn wir zuvor die ID zum Markieren eines Elements verwendet haben und den Stil dieses Elements ändern möchten, können wir nur den entsprechenden CSS-Stilcode ändern oder die Hervorhebungssyntax !important verwenden, um einen bestimmten Stil zu überschreiben der ursprüngliche Stil.

Wenn das Element mit der Klasse markiert ist, fügen wir dem Element direkt eine ID hinzu und erstellen dann einen CSS-Selektor für die Element-ID, um sie zu ändern und zu überschreiben.

Gerade wegen dieser Eigenschaften sollten Sie versuchen, Elemente mithilfe von Klassen zu markieren, um die spätere Wartung zu erleichtern.

4.id ist auch ein Muss

Klasse ist nicht allmächtig. Es gibt viele Orte, an denen wir id gleichzeitig verwenden müssen.

5. Anker-Tag-Sprung

Wenn Sie Anker-Tags zum Springen auf der Seite verwenden möchten, können Sie aufgrund der Klasse nur die ID eines bestimmten Sprungziels angeben Es kann wiederholt verwendet werden und verfügt daher nicht über die Sprungfunktion.

6. Wird in der Eingabe verwendet

Bei der Verwendung von Eingaben werden Label-Tags normalerweise verwendet, um die Funktion der Eingabe zu beschreiben. Es gibt zwei Möglichkeiten, die Beschriftung mit der Eingabe zu verknüpfen. Die eine besteht darin, das for-Attribut der Beschriftung zu verwenden. Die andere besteht darin, die entsprechende Eingabe mit der Beschriftung zu versehen. Offensichtlich ist die erste Methode flexibler und besser, Sie müssen jedoch ein ID-Attribut für die entsprechende Eingabe angeben.

Darüber hinaus müssen einige spezielle Anforderungen auch die ID verwenden, die hier nicht zusammengefasst werden.

Die beste Kombination der Verwendung

Es gab bereits viele Kritikpunkte an der Klasse, und einige sagten sogar, dass W3C das Klassen-Tag auch abschaffen sollte das id-Attribut Er ist ein begeisterter Benutzer, entdeckt aber in der Praxis zunehmend die Vorteile von Klassen und nutzt sie stattdessen.

Eine bessere Kombination besteht darin, die Klasse zur Angabe der meisten Elemente und Strukturen zu verwenden und die ID-Annotation für sehr wenige Elemente zu verwenden, die bestimmte Funktionen erfordern.

Weitere Artikel, in denen die Vorteile von Klasse gegenüber ID beim Markieren von HTML-Elementen analysiert werden, finden Sie auf der chinesischen PHP-Website!