So verwenden Sie ID- und Klassenselektoren in CSS

Ich verwende oft id und class, um den Umfang des angewendeten Stils anzugeben. Es ist jedoch schwierig zu bestimmen, ob id oder class richtig verwendet werden soll. In diesem Artikel stellen wir die Verwendung von id und class vor.

Der Unterschied zwischen ID und Klasse

ID ist eindeutig und es kann viele Klassen geben

Auf der Seite kann nur eine ID geschrieben werden, es können jedoch mehrere IDs für den Unterricht geschrieben werden.

Dies bedeutet jedoch nicht, dass Sie die ID verwenden müssen, wenn auf der Seite nur eine angezeigt wird. Es gibt Einschränkungen bei der Verwendung von Ausweisen.

Wenn es einen Stilkonflikt zwischen id und class gibt, hat id Vorrang

Nehmen wir ein Beispiel, um es zu sehen.

HTML

<p id="red" class="blue">ID和class优先级比较——文字颜色</p>

CSS

#red{
color:red;
}
.blue{
color:blue;
}

Der Effekt ist wie folgt:

Die in angezeigte Schriftart Das obige Bild ist rot. Ja, das liegt daran, dass die Priorität der ID höher ist als die Priorität der Klasse, sodass die endgültige angezeigte Farbe rot ist.

Sie können zur ID innerhalb der Seite springen

Durch die Verknüpfung mit der ID können Sie zur entsprechenden ID-Position springen.

<a name="#ananker name">跳转到id </a>

verwendet dies häufig, um die Sprungfunktion am Anfang der Seite festzulegen.

Wo kann ich die ID verwenden?

Zuallererst gibt es als Hauptvoraussetzung keine Einschränkungen für die Verwendung von Klassen, aber es gibt Einschränkungen für Ausweis.

Ehrlich gesagt ist dies oft möglich, selbst wenn Sie es mit einer Klasse beschreiben, ohne eine ID zu verwenden, ist es daher besser, darüber nachzudenken, wie Sie die Verwendung unterscheiden können Wo soll die ID verwendet werden?

Der Ort, an dem der Ausweis verwendet wird, ist „der Einzige“ oder „der Beste“.

Wenn Sie die In-Page-Jump-Funktion hinzufügen möchten

Wenn Sie die In-Page-Jump-Funktion verwenden, verwenden Sie bitte die ID, da diese nicht mit der Klasse implementiert werden kann.

wird dort verwendet, wo „nur“ eingestellt werden kann

Grundsätzlich gibt es nur einen Seitenteil auf der Seite, wie z. B. Titel, Inhalt, Seitenleiste, Fußzeile. Mit ID lässt sich so etwas einfacher umsetzen.

Fassen Sie die gemeinsamen Teile der Klasse zusammen und verwenden Sie die ID, um den Stil zu überschreiben.

Dies ist eine Spezifikation mit CSS, bei der die ID Vorrang vor der Klasse hat.

Webseiten haben ein bestimmtes Layout, das auf der Seite basiert, aber es gibt viele ähnliche Teile. Sie können Ihr CSS komprimieren, indem Sie Standardstile als Klassen schreiben und IDs verwenden, um die charakteristischen Teile jeder Seite zu schreiben.

Der Selektor-Matching-Prozess der ID ist schneller.

Wenn Sie jQuery usw. verwenden, um die Selector-Matching-Verarbeitung durchzuführen, ist er bei der Angabe der ID schneller. Dies liegt daran, dass bei Angabe der ID die Verarbeitung abgeschlossen werden kann, wenn es auf der Seite gefunden wird. Handelt es sich hingegen um eine Klasse, muss diese bis zum Ende gescannt werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ID- und Klassenselektoren in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!