Heim >Web-Frontend >HTML-Tutorial >Der Unterschied zwischen ID und Klasse in HTML

Der Unterschied zwischen ID und Klasse in HTML

WBOYnach vorne: 2023-08-31 11:53:061819Durchsuche

In HTML sind Id und Class beide Elementselektoren, die verwendet werden, um Elemente basierend auf den diesen Parametern zugewiesenen Namen zu identifizieren. ID- und Klassenselektoren sind die am häufigsten verwendeten Elementselektoren in CSS (HTML). Der grundlegende Unterschied zwischen ID und Klasse besteht darin, dass der ID-Selektor nur für ein Element auf der Seite gilt, während der Klassenselektor auf mehrere Elemente auf einer einzelnen Seite angewendet werden kann.

Lesen Sie diesen Artikel, um mehr über „id“ und „class“ in HTML und den Unterschied zwischen ihnen zu erfahren.

Was ist ID in HTML?

In HTML wird der „id“-Selektor für das id-Attribut eines Elements verwendet. Bei HTML-Elementen beginnt der „id“-Name mit dem Symbol „#“, gefolgt von einem eindeutigen Namen. Ein wichtiges Merkmal des id-Elements besteht darin, dass wir einem Element nur einen id-Selektor hinzufügen können. Daher sind ID-Selektoren innerhalb einer HTML-Seite immer eindeutig.

Beispiel für die ID-Auswahl

<!DOCTYPE html>
<html>
<head>
<title>
  Id demo
</title>
<style>
  #idDemo{
     color:green;
     font-size:25px;
  }
</style>
</head>
<body style="text-align:center">
   <h1>Get element by Id</h1>
   <p id="idDemo">Demo for Id selector</p>
</body>
</html>

Was ist CLASS in HTML?

In HTML wird der „Klasse“-Selektor verwendet, um Elemente mit einem bestimmten Klassenattribut auszuwählen. Klassenselektoren beginnen mit einem Punkt (.), gefolgt vom Klassennamen. Im Gegensatz zum ID-Selektor können wir einem HTML-Element mehrere Selektoren hinzufügen. Daher kann diese Klasse innerhalb einer Seite mehrfach angewendet werden. Bei Klassenselektoren ist zu beachten, dass Klassennamen nicht mit einer Zahl beginnen dürfen.

Beispiel für die Klassenauswahl

<!DOCTYPE html>
<html>
<head>
<title>
	Class demo
</title>
<style>
   .classDemo{
       color:orange;
       font-size:25px;
   }
</style>
</head>
<body style="text-align:center">
	<h1>Get element by class<h1>
	<p class="classDemo">Demo for class selector</p>
</body>
</html>

Der Unterschied zwischen ID und KLASSE in HTML

Im Folgenden sind die wichtigen Unterschiede zwischen Id und Class − aufgeführt

Schlüssel	Id	Kategorie
Grammatik	In HTML beginnt der ID-Name eines Elements mit dem „#“-Symbol, gefolgt von dem ihm zugewiesenen eindeutigen Namen.	Der Name der dem Element zugewiesenen „Klasse“ beginnt mit „.“ Es folgt der Klassenname.
Selektor	Einem Element kann nur ein ID-Selektor zugeordnet werden.	An ein Element können mehrere Klassenselektoren angehängt werden.
Einzigartigkeit	ID ist innerhalb der Seite eindeutig und kann nur auf höchstens ein Element angewendet werden	Diese Klasse kann auf mehrere Elemente und daher mehrmals auf einer einzelnen Seite angewendet werden.

Fazit

Der wichtigste Unterschied, den Sie hier beachten sollten, besteht darin, dass ein Element nur einen ID-Selektor haben kann, während ein Element mehrere Klassenselektoren haben kann. Allerdings werden sowohl ID- als auch Klassenselektoren verwendet, um Elemente anhand des dem Elementparameter zugewiesenen Namens zu identifizieren.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen ID und Klasse in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html class 选择器

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?Nächster Artikel：Wie kann ich diesen JavaScript-Code ändern, um die Bild-URL aus einer JSON-Datei abzurufen und in HTML anzuzeigen?

In Verbindung stehende Artikel

Mehr sehen