web-dev-qa-db-de.com

Was ist der Unterschied zwischen einer ID und einer Klasse?

Was ist der Unterschied zwischen <div class=""> und <div id="">, wenn es um CSS geht? Ist es in Ordnung, <div id=""> zu verwenden?

Ich sehe, dass verschiedene Entwickler dies in beide Richtungen tun, und da ich Autodidakt bin, habe ich es nie wirklich herausgefunden.

204
johnnietheblack

ids muss eindeutig sein, wobei class auf viele Dinge angewendet werden kann. In CSS sehen ids wie #elementID und class-Elemente wie .someClass aus.

Im Allgemeinen verwenden Sie id, wenn Sie auf ein bestimmtes Element verweisen möchten, und class, wenn Sie mehrere Dinge haben, die alle gleich sind. Zum Beispiel sind id-Elemente Dinge wie header, footer, sidebar. Übliche class-Elemente sind Dinge wie highlight oder external-link.

Es ist eine gute Idee, sich mit der Kaskade vertraut zu machen und zu verstehen, welchen Rang die verschiedenen Selektoren haben: http://www.w3.org/TR/CSS2/cascade.html

Die grundlegendste Priorität, die Sie jedoch verstehen sollten, ist, dass id-Selektoren Vorrang vor class-Selektoren haben. Wenn du das hättest:

<p id="intro" class="foo">Hello!</p>

und:

#intro { color: red }
.foo { color: blue }

Der Text wäre rot, da der Selektor id Vorrang vor dem Selektor class hat.

303
Tyson

Vielleicht hilft eine Analogie, den Unterschied zu verstehen:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Student ID Karten sind unterschiedlich. Keine zwei Studenten auf dem Campus haben den gleichen Studenten ID Karte. Viele Schüler können und werden jedoch mindestens eine Klasse miteinander teilen.

Es ist in Ordnung, mehrere Schüler unter einen Klasse Titel zu setzen, z. B. Biologie. Es ist jedoch niemals akzeptabel, mehrere Schüler unter einen Schüler zu setzen ID.

Wenn Sie Regeln über die Schulsprechanlage geben, können Sie Regeln an eine Klasse geben:

"Morgen sollen alle Schüler im Biologieunterricht ein rotes Hemd tragen."

.Biology {
  color: red;
}

Oder Sie können einem bestimmten Schüler Regeln geben, indem Sie sein eindeutiges ID aufrufen:

"Jonathan Sampson soll morgen ein grünes Hemd tragen."

#JonathanSampson {
  color: green;
}

In diesem Fall erhält Jonathan Sampson zwei Befehle: einen als Schüler im Biologieunterricht und einen als direkte Anforderung. Da Jonathan direkt über das ID-Attribut angewiesen wurde, ein grünes Hemd zu tragen, wird er die frühere Aufforderung, ein rotes Hemd zu tragen, ignorieren.

Die spezifischeren Selektoren gewinnen.

158
Sampson

Wo wird eine ID gegenüber einer Klasse verwendet?

Der einfache Unterschied zwischen den beiden besteht darin, dass eine Klasse zwar wiederholt auf einer Seite verwendet werden kann, eine ID jedoch nur einmal pro Seite verwendet werden muss. Daher ist es ratsam, eine ID für das div-Element zu verwenden, das den Hauptinhalt der Seite markiert, da es nur einen Hauptinhaltsabschnitt gibt. Im Gegensatz dazu müssen Sie eine Klasse verwenden, um abwechselnde Zeilenfarben in einer Tabelle einzurichten, da diese definitionsgemäß mehrmals verwendet werden.

IDs sind ein unglaublich leistungsfähiges Werkzeug. Ein Element mit einer ID kann das Ziel eines Teils von JavaScript sein, das das Element oder dessen Inhalt auf irgendeine Weise manipuliert. Das ID-Attribut kann als Ziel eines internen Links verwendet werden, um Ankertags durch Namensattribute zu ersetzen. Wenn Sie Ihre IDs eindeutig und logisch machen, können sie schließlich als eine Art "Selbstdokumentation" innerhalb des Dokuments dienen. Beispielsweise müssen Sie nicht unbedingt vor einem Block einen Kommentar hinzufügen, der besagt, dass ein Codeblock den Hauptinhalt enthalten wird, wenn das öffnende Tag des Blocks eine ID enthält, z ", usw.

16

Eine ID muss auf der gesamten Seite eindeutig sein.

Eine Klasse kann für viele Elemente gelten.

Manchmal ist es eine gute Idee, IDs zu verwenden.

Auf einer Seite haben Sie normalerweise eine Fußzeile, eine Kopfzeile ...

Dann kann die Fußzeile in ein Div mit einer ID sein

<div id = "footer" class = "...">

und noch eine Klasse haben

7
Luc M

Eine -KLASSE sollte für mehrere Elemente verwendet werden, für die derselbe Stil verwendet werden soll. Ein ID sollte für ein eindeutiges Element stehen. Sehen Sie dieses Tutorial .

Sie sollten sich auf W3C-Standards beziehen, wenn Sie ein strikter Konformist sein möchten oder Ihre Seiten validiert den Standards entsprechen möchten.

6
jjclarkson

CSS ist objektorientiert. ID sagt Instanz, Klasse sagt Klasse.

5
annakata

IDs sind eindeutig. Klassen sind nicht Elemente können auch mehrere Klassen haben. Klassen können auch dynamisch hinzugefügt und zu einem Element entfernt werden.

Überall, wo Sie eine ID verwenden können, können Sie stattdessen eine Klasse verwenden. Das Gegenteil trifft nicht zu.

Die Konvention scheint zu sein, IDs für Seitenelemente zu verwenden, die sich auf jeder Seite befinden (wie "Navbar" oder "Menü") und Klassen für alles andere, aber dies ist nur Konvention und es gibt eine große Variation in der Verwendung.

Ein weiterer Unterschied besteht darin, dass das Element <label> für Form-Eingabeelemente auf ein Feld anhand der ID verweist, sodass Sie IDs verwenden müssen, wenn Sie <label> verwenden. ist eine barrierefreie Sache, und Sie sollten es wirklich verwenden.

In den vergangenen Jahren wurden auch IDs bevorzugt, weil sie in Javascript (getElementById) leicht zugänglich sind. Mit dem Aufkommen von jQuery und anderen Javascript-Frameworks ist dies jetzt fast kein Thema.

5
cletus

Klassen sind wie Kategorien. Viele HTML-Elemente können zu einer Klasse gehören, und ein HTML-Element kann mehrere Klassen haben. Klassen werden verwendet, um allgemeine Stile oder Stile anzuwenden, die auf mehrere HTML-Elemente angewendet werden können.

IDs sind Bezeichner. Sie sind einzigartig. Niemand darf dieselbe ID haben. IDs werden verwendet, um einem HTML-Element eindeutige Stile zuzuweisen.

Ich benutze IDs und Klassen auf diese Weise:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

In diesem Beispiel können die Kopf- und Inhaltsbereiche über #header und #content gestaltet werden. Jeder Abschnitt des Inhalts kann über #content .section einen gemeinsamen Stil anwenden. Nur für Tritte habe ich eine "spezielle" Klasse für den Mittelteil hinzugefügt. Angenommen, Sie möchten, dass ein bestimmter Abschnitt einen besonderen Stil hat. Dies kann mit der .special-Klasse erreicht werden, dennoch erbt der Abschnitt die allgemeinen Stile von #content .section.

Bei der JavaScript- oder CSS-Entwicklung verwende ich normalerweise IDs, um auf ein bestimmtes HTML-Element zuzugreifen bzw. diese zu bearbeiten, und ich benutze Klassen, um Stile auf eine Vielzahl von Elementen zuzugreifen.

5
JR.

Wenn Sie CSS anwenden, wenden Sie es auf eine Klasse an und versuchen Sie so viel wie möglich auf eine ID zu vermeiden. Die ID sollte nur in JavaScript zum Abrufen des Elements oder für eine Ereignisbindung verwendet werden.

Klassen sollten verwendet werden, um CSS anzuwenden. 

Manchmal müssen Sie Klassen für die Ereignisbindung verwenden. Versuchen Sie in solchen Fällen, Klassen zu vermeiden, die zum Anwenden von CSS verwendet werden, und fügen Sie stattdessen neue Klassen hinzu, die nicht über entsprechendes CSS verfügen. Dies ist hilfreich, wenn Sie das CSS für eine beliebige Klasse ändern oder den Namen der CSS-Klasse für jedes Element ändern müssen.

2

Der CSS-Selector-Space erlaubt tatsächlich einen bedingten ID-Stil:

h1#my-id {color:red}
p#my-id {color:blue}

wird wie erwartet rendern. Wieso würdest du das machen? Manchmal werden IDs dynamisch generiert usw. Eine weitere Verwendung bestand darin, Titel auf der Grundlage einer übergeordneten ID-Zuweisung unterschiedlich darzustellen:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Persönlich bevorzuge ich längere Klassennamen-Selektoren:

body#list-page .title-block > h1 {font-size:56px}

wie ich finde, verschachtelte IDs zur Differenzierung der Behandlung etwas pervers zu sein. Wisse einfach, dass Entwickler in der Sass / SCSS - Welt diese Dinge in die Finger bekommen, verschachtelte IDs werden zur Norm.

Wenn es um Leistung und Priorität von Selektoren geht, gewinnt ID am Ende. Dies ist ein ganz anderes Thema.

2
duggi

Class dient dazu, Ihren Stil auf eine Gruppe von Elementen anzuwenden. ID-Stile gelten nur für das Element mit dieser ID (es sollte nur einen geben). Normalerweise verwenden Sie Klassen, aber wenn es einmalig ist, können Sie IDs verwenden (oder den Stil direkt in das Element einfügen).

0
Adam A

Jedes Element kann eine Klasse oder eine ID haben.

Eine Klasse wird verwendet, um auf einen bestimmten Anzeigetyp zu verweisen. Beispielsweise haben Sie möglicherweise eine CSS-Klasse für ein div, die die Antwort auf diese Frage darstellt. Da es viele Antworten geben wird, benötigen mehrere Divs das gleiche Styling, und Sie würden eine Klasse verwenden.

Eine ID bezieht sich nur auf ein einzelnes Element. Beispielsweise könnte der zugehörige Abschnitt auf der rechten Seite ein spezielles Styling haben, das nicht an anderer Stelle wiederverwendet wird. Es würde eine ID verwenden.

Technisch können Sie Klassen für alle Klassen verwenden oder diese logisch aufteilen. Sie können jedoch keine IDs für mehrere Elemente wiederverwenden.

0
ermau

In der fortgeschrittenen Entwicklung id können wir grundsätzlich JavaScript verwenden.

Für wiederholbare Zwecke ist class praktisch, im Gegensatz zu id, die eindeutig sein sollen.

Nachfolgend ein Beispiel, das die obigen Ausdrücke veranschaulicht:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Jetzt sehen Sie hier box und box1 zwei (2) verschiedene <div> -Elemente, aber wir können die Klassen box und bg-color-red auf beide anwenden.

Das Konzept ist Vererbung in einer OOP Sprache.

0
nuke_infer

1) div id ist nicht wiederverwendbar und sollte nur auf ein HTML-Element angewendet werden, während die div-Klasse mehreren Elementen hinzugefügt werden kann.

2) Eine ID hat eine größere Bedeutung, wenn beide auf dasselbe Element angewendet werden und widersprüchliche Stile aufweisen. Die Stile der ID werden angewendet. 

3) Style-Elemente beziehen sich immer auf eine Div-Klasse, indem Sie ein. (Punkt) vor ihren Namen, während die Klasse der Div-IDs durch ein # (Hash) vor ihren Namen gesetzt wird.

4) Beispiel: -

klasse in der <style>-Deklaration - .red-background { background-color: red; }

id in <style> deklaration - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Hier ist der Hintergrund blau

0
MERLIN THOMAS