Was ist der Unterschied zwischen Klasse und ID beim Beschriften von HTML-Elementen?

Dieses Mal werde ich Ihnen den Unterschied zwischen Klasse und ID beim Beschriften von HTML-Elementen vorstellen. Das Folgende ist ein praktischer Fall Schauen Sie mal rein. 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:

Jetzt gibt es mehr Auswahlmethoden, wie zum Beispiel:

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

Attribute Selector

usw. 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 mehr Optionen gibt, empfehle ich dennoch die Verwendung von ID sowie Klassen- und Elementnamen zum Erstellen von CSS-Selektoren. 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, kann keine andere ID auf der Webseite angezeigt werden HTML-Element für aa. 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. Die

Priorität

ist in CSS unterschiedlichIm 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 Div mit der ID aa und der Klasse bb spezifiziere:

, zeigt der Browser einen roten Hintergrund an.

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

3. Sprungfunktion

Die Verwendung des ID-Attributs kann die Sprungfunktion des Ankertags erhöhen. Wenn wir die ID als aa für ein Div auf der Seite angeben, sind wir dabei Geben Sie die aktuelle URL ein. Fügen Sie danach #aa hinzu, und die Seite springt sofort zum Speicherort des Div mit der ID aa. Beispiel: Kapitelsprung in der Baidu-Enzyklopädie. Die Klasse hat diese Funktion nicht.

Warum class anstelle von id verwenden

Welche Vorteile bietet die Verwendung von class?

1. Reduzieren Sie die Benennung

Das Benennen komplexer Strukturen ist wirklich eine mühsame Sache. Wenn ich ID zum Beschriften verwende, muss ich jeder Struktur einen Namen geben. 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. Hoch wiederverwendbare

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

Schreiben Sie einige Klassen so klein und prägnant wie möglich und schreiben Sie dann direkt für ein Element, das diesen Stil erfordert (zum Beispiel: den Float oben). Klasse (zum Beispiel: class="fl").

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

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 Priorität der Klasse ist höher als der Elementname und niedriger als die ID. Die Funktion der niedrigen 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 nur die ID eines bestimmten Sprungziels angeben, da die Klasse mehrmals wiederverwendet werden kann. , daher verfügt es nicht über die Sprungfunktion.

6. Wird in der Eingabe verwendet

Bei der Verwendung von Eingaben werden normalerweise Label-Tags 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 abschaffen sollte. Ich war auch ein begeisterter Benutzer des ID-Attributs. Aber im Laufe der Praxis entdeckte ich immer mehr die Vorteile des Unterrichts und wechselte zum Unterricht.

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.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man mobile Webseiteninhalte adaptiv macht

Wie man mit Inhaltsüberlauf in Tabellentabellen umgeht

So erhalten Sie die dynamische verbleibende Wortanzahl von textarea

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Klasse und ID beim Beschriften von HTML-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!