Was ist der Unterschied zwischen einer ID und einer Klasse?

https://stackoverflow.com/questions/544010

23-08-2019
|

Frage

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

Ich sehe verschiedene Entwickler diese in beiden Richtungen zu tun, und da ich selbst bin gelehrt, ich habe nie gedacht, es ist wirklich aus.

Lösung

ids muss eindeutig sein, wo, wie class kann auf viele Dinge angewendet werden. In CSS aussehen ids wie #elementID und class Elemente aussehen .someClass

In der Regel verwenden id, wenn Sie auf ein bestimmtes Element beziehen möchten und class, wenn Sie eine Reihe von Dingen, die alle gleich sind. Zum Beispiel sind gemeinsame id Elemente Dinge wie header, footer, sidebar. Gemeinsame class Elemente sind Dinge wie highlight oder external-link.

Es ist eine gute Idee, auf der Kaskade zu lesen und zu verstehen, den Vortritt zu verschiedenen Selektoren zugewiesen: http://www.w3.org/TR/CSS2/cascade.html

Die grundlegendste Vorrang Sie sollte jedoch verstehen, dass id Selektoren Vorrang vor class Wähler nehmen. Wenn Sie dies hatte:

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

und

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

Der Text wäre rot, weil die id Wähler Vorrang vor dem class Wähler nimmt.

Andere Tipps

Vielleicht eine Analogie helfen, den Unterschied zu verstehen:

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

Student ID Karten sind verschieden. Keine zwei Studenten auf dem Campus haben die gleichen Schüler ID Karte. viele Studenten können jedoch und wird mindestens ein Klasse miteinander teilen.

Es ist in Ordnung, mehrere Schüler unter einer Klasse Titeln, wie Biologie zu setzen. Aber es ist nie akzeptabel mehrere Schüler unter einem Schüler zu setzen ID .

Bei Angabe Regeln über die Schule Intercom-System, können Sie geben Regeln Klasse :

„Morgen alle Schüler sind ein rotes Hemd zu Biologie Klasse tragen.“

.Biology {
  color: red;
}

Sie können auch Regeln geben, um einen bestimmten Schüler, durch seine einzigartige ID Aufruf :

"Jonathan Sampson ist ein grünes Hemd morgen zu tragen."

#JonathanSampson {
  color: green;
}

In diesem Fall Jonathan Sampson erhält zwei Befehle aus: einer als Student in der Biologie Klasse, und eine andere als direkte Anforderung. Weil Jonathan direkt gesagt wurde, über das id-Attribut, ein grünes Hemd zu tragen, er wird die frühere Anforderung ignoriert ein rotes Hemd zu tragen.

Die spezifischeren Selektoren gewinnen.

Wo eine ID im Vergleich zu einer Klasse verwenden

Der einfache Unterschied zwischen den beiden ist, dass, während eine Klasse wiederholt auf einer Seite verwendet werden kann, muss eine ID nur einmal pro Seite verwendet werden. Daher ist es angebracht, eine ID auf dem div Element zu verwenden, der den wesentlichen Inhalt auf der Seite ist die Kennzeichnung auf, da es nur einen Hauptbereich sein wird. Im Gegensatz dazu müssen Sie eine Klasse verwenden Zeilenfarben auf einem Tisch einzurichten abwechselnd, da sie per Definition geht mehr als einmal verwendet werden.

IDs sind ein unglaublich mächtiges Werkzeug. Ein Element mit einer ID kann das Ziel von einem Stück JavaScript sein, die das Element oder sein Inhalt in irgendeiner Weise manipuliert. Das ID-Attribut kann als Ziel eines internen Link verwendet wird, Anker-Tags mit dem Namen Attribute zu ersetzen. Schließlich, wenn Sie Ihre IDs klar und logisch zu machen, können sie als eine Art „Selbstdokumentation“ innerhalb des Dokuments dienen. Zum Beispiel müssen Sie nicht unbedingt einen Kommentar, bevor ein Block hinzuzufügen, die besagt, dass ein Codeblock wird den Hauptinhalt enthalten, wenn das Starttag des Blocks eine ID hat, sagen wir, „main“, „header“, „Fußzeile “, etc.

Eine ID muss in der ganzen Seite eindeutig sein.

Eine Klasse zu viele Elemente gelten.

Manchmal ist es eine gute Idee, ids zu verwenden.

In einer Seite, haben Sie in der Regel eine Fußzeile, ein Kopf ...

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

und haben immer noch eine Klasse

CLASS sollte für mehrere Elemente verwendet werden, die Sie das gleiche Styling wollen. Eine ID sollte für ein einzigartiges Element sein. Sehen Sie diese Tutorial .

Sie sollten auf die W3C-Standards , wenn Sie eine streng sein wollen konformistisch, oder wenn Sie möchten, dass Ihre Seiten werden die Standards validiert .

IDs sind einzigartig. Die Klassen sind nicht. Elemente können auch mehrere Klassen haben. Klassen können auch auf ein Element dynamisch hinzugefügt und entfernt werden.

Überall können Sie eine ID verwenden Sie eine Klasse stattdessen benutzen konnten. Das Gegenteil ist nicht wahr.

Die Konvention scheint IDs zu bedienen für Seitenelemente, die auf jeder Seite sind (wie „navbar“ oder „Menü“) und Klassen für alles andere, aber das ist nur Konvention und Sie werden große Abweichungen in der Anwendung finden.

Ein weiterer Unterschied besteht darin, dass für die Formulareingabeelemente, die <label> Element ein Feld von ID verweist, so dass Sie benötigen IDs verwenden, wenn Sie gehen <label> zu verwenden. eine Zugänglichkeit Sache ist, und Sie sollten es wirklich verwenden.

In den Jahren von IDs gegangen waren auch bevorzugt, weil sie in Javascript (getElementByld) leicht zugänglich sind. Mit dem Aufkommen von jQuery und andere dieses Javascript-Frameworks ist so ziemlich ein Nicht-Problem jetzt.

Die Klassen sind wie Kategorien. Viele HTML-Elemente können zu einer Klasse gehören, und ein HTML-Element kann mehr als eine Klasse. Klassen werden verwendet, um allgemeine Arten oder Stile anwenden, die über mehrere HTML-Elemente angewendet werden können.

IDs sind Kennungen. Sie sind einzigartig; niemand sonst darf die gleiche ID haben. IDs werden verwendet, einzigartige Stile zu einem HTML-Elemente anzuwenden.

Ich verwende 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 werden die Header und Inhalte Abschnitte über #header und #content gestylt werden. Jeder Abschnitt des Inhalts kann einen gemeinsamen Stil durch #content .section angewandt werden. Just for Kicks, habe ich eine „besondere“ Klasse für den mittleren Abschnitt. Angenommen, Sie einen bestimmten Abschnitt wollten ein besonderes Styling haben. Dies kann mit der .Special Klasse erreicht werden, dennoch ist der Abschnitt erbt noch die gemeinsamen Stile von #content .section.

Wenn ich JavaScript oder CSS-Entwicklung zu tun, verwende ich normalerweise IDs den Zugriff auf / manipulieren, um ein sehr spezifisches HTML-Element, und ich verwende Klassen für den Zugriff / styles auf eine breite Palette von Elementen anwenden.

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

CSS-Selektor Raum ermöglicht tatsächlich für die bedingten id style:

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

machen wird, wie erwartet. Wieso würdest du das machen? Manchmal dynamisch IDs erzeugt werden, usw. Eine weitere Anwendung wurde Titel anders basierend auf einer High-Level-ID-Zuweisung zu machen:

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

Ich persönlich ziehe länger classname Selektoren:

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

als ich verschachtelte IDs finden mit der Behandlung zu unterscheiden ein bisschen pervers zu sein. Genau wissen, dass als Entwickler in der Sass / SCSS Welt bekommen ihre Hände auf dieses Zeug, werden immer verschachtelte IDs die Norm.

Schließlich, wenn es Leistung und der Vorrang Wähler kommt, neigt ID zu gewinnen aus. Dies ist ein ganz anderes Thema.

Wenn CSS Anwendung, es auf eine Klasse und versuchen, so viel zu vermeiden, wie Sie können auf eine ID. Die ID sollte nur in JavaScript verwendet werden, um das Element oder für jeden Fall zu holen binden.

sollten Klassen verwendet werden CSS anzuwenden.

Manchmal für Sie haben Klassen verwenden Ereignisbindung. In solchen Fällen versuchen, Klassen zu vermeiden, die für die Anwendung CSS verwendet werden und eher neue Klassen hinzuzufügen, die nicht entsprechende CSS haben. Dies kommt zu helfen, wenn Sie die CSS für jede Klasse ändern müssen, oder die CSS-Klasse Namen alle für jedes Element zusammen ändern.

Jedes Element kann eine Klasse oder eine ID.

ist eine Klasse verwendet, um eine bestimmte Art von Anzeige zu verweisen, zum Beispiel Sie eine CSS-Klasse für einen div haben können, die die Antwort auf diese Frage stellt. Wie wird es viele Antworten geben, müßten mehrere divs die gleiche Optik und Sie würden eine Klasse verwenden.

Ein-ID bezieht sich auf nur ein einziges Element, zum Beispiel die entsprechenden Abschnitt auf der rechten Seite haben kann Styling spezifisch für sie nicht an anderer Stelle wiederverwendet, wäre es eine ID verwenden.

Technisch können Sie Klassen verwenden für alles, oder teilen sie logisch auf. Sie können jedoch nicht ids für mehrere Elemente wiederverwendet werden.

Klasse ist für Ihren Stil zu einer Gruppe von Elementen anwenden. ID Arten gelten nur das Element mit dieser ID (es sollte nur eine sein). Normalerweise verwenden Sie Klassen, aber wenn es eine einmalige können Sie IDs (oder bleiben gerade die Art direkt in das Element).

In fortgeschrittener Entwicklung id s können wir im Grunde JavaScript verwenden.

Für wiederholbare Zwecke, Klasse es kommt praktisch im Gegensatz zu id s, die angeblich eindeutig sein.

Im Folgenden ist ein Beispiel, welches die Ausdrücke oben:

<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 können Sie sehen hier box und box1 sind zwei (2) unterschiedliche <div> Elemente, aber wir können die box und bg-color-red Klassen für beide von ihnen gelten.

Das Konzept ist die Vererbung in einem OOP Sprache.

1) div id nicht wieder verwendbar ist und sollte nur auf ein Element von HTML angelegt werden, während div class kann auf mehrere Elemente hinzugefügt werden.

2) Eine ID größere Bedeutung hat, wenn beide auf das gleiche Element angewendet werden und haben gegensätzliche Stile, werden die Stile der ID angelegt.

3) Style-Element immer eine div Klasse beziehen, die durch ein Putting. (Dot) vor ihrem Namen, während div id-Klasse wird, indem man ein # (Raute) vor ihrem Namen genannt.

4) Beispiel: -

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

id in <style> Erklärung -   #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div>   Hier Hintergrund in blauer Farbe sein wird,

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow