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 zu benutzen <div id="">?

Ich sehe verschiedene Entwickler, die dies auf beide Arten tun, und da ich Autodidakt bin, habe ich es nie wirklich herausgefunden.

idsmuss einzigartig sein, wo classdies auf viele Dinge angewendet werden kann. In CSS sehen ids aus #elementIDund classElemente sehen aus wie.someClass

Verwenden idSie diese Option im Allgemeinen immer dann , wenn Sie sich auf ein bestimmtes Element beziehen möchten und classwenn Sie eine Reihe von Dingen haben, die alle gleich sind. Zum Beispiel gemeinsame idElemente sind Dinge wie header, footer, sidebar. Gemeinsame classElemente sind Dinge wie highlightoder external-link.

Es ist eine gute Idee, sich über die Kaskade zu informieren und die Priorität zu verstehen, die verschiedenen Selektoren zugewiesen wurde: http://www.w3.org/TR/CSS2/cascade.html

Die grundlegendste Priorität, die Sie verstehen sollten, ist jedoch, dass idSelektoren Vorrang vor classSelektoren 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 idSelektor Vorrang vor dem classSelektor hat.

Vielleicht hilft eine Analogie, 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 die gleichen Schüler haben ID - Karte. Viele Schüler können und werden jedoch mindestens eine Klasse miteinander teilen .

Es ist in Ordnung, mehrere Schüler unter einen Klassentitel zu stellen , z. B. Biologie. Aber es ist nie akzeptabel mehrere Schüler unter einem Schüler zu setzen ID .

Wenn Sie Regeln über das Intercom-System der Schule geben, können Sie einer Klasse Regeln geben :

"Morgen sollen alle Schüler ein rotes Hemd für den Biologieunterricht tragen."

.Biology {
  color: red;
}

Oder Sie können einem bestimmten Schüler Regeln geben, indem Sie seine eindeutige 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 über das ID-Attribut direkt angewiesen wurde, ein grünes Hemd zu tragen, wird er die frühere Aufforderung, ein rotes Hemd zu tragen, ignorieren.

Die spezifischeren Selektoren gewinnen.

Wo kann eine ID im Vergleich zu einer Klasse verwendet werden?

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

IDs sind ein unglaublich leistungsfähiges Werkzeug. Ein Element mit einer ID kann das Ziel eines JavaScript-Teils sein, das das Element oder seinen Inhalt auf irgendeine Weise manipuliert. Das ID-Attribut kann als Ziel eines internen Links verwendet werden und Anker-Tags durch Namensattribute ersetzen. Wenn Sie Ihre IDs klar und logisch machen, können sie als eine Art „Selbstdokumentation“ innerhalb des Dokuments dienen. Beispielsweise müssen Sie vor einem Block nicht unbedingt einen Kommentar hinzufügen, der besagt, dass ein Codeblock den Hauptinhalt enthält, wenn das öffnende Tag des Blocks die ID "main", "header" oder "footer" hat ", etc.

Eine ID muss auf der gesamten Seite eindeutig sein.

Eine Klasse kann auf viele Elemente angewendet werden.

Manchmal ist es eine gute Idee, IDs zu verwenden.

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

Dann kann sich die Fußzeile in einem Div mit einer ID befinden

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

und noch eine Klasse haben

Eine KLASSE sollte für mehrere Elemente verwendet werden, für die Sie dasselbe Styling wünschen. Eine ID sollte für ein eindeutiges Element sein. Siehe dieses Tutorial .

Sie sollten sich auf die W3C-Standards beziehen, wenn Sie ein strikter Konformist sein möchten oder wenn Sie möchten, dass Ihre Seiten gemäß den Standards validiert werden .

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

Überall dort, wo Sie eine ID verwenden können, können Sie stattdessen eine Klasse verwenden. Das Gegenteil ist nicht der Fall.

Die Konvention scheint darin zu bestehen, IDs für Seitenelemente zu verwenden, die sich auf jeder Seite befinden (wie "navbar" oder "menu"), und Klassen für alles andere, aber dies ist nur eine Konvention, und Sie werden große Unterschiede in der Verwendung feststellen.

Ein weiterer Unterschied besteht darin, dass das <label>Element für Formulareingabeelemente ein Feld nach ID referenziert, sodass Sie IDs verwenden müssen, wenn Sie es verwenden möchten <label>. ist eine Sache der Barrierefreiheit und Sie sollten sie wirklich verwenden.

In früheren Jahren wurden IDs auch bevorzugt, da sie in Javascript (getElementById) leicht zugänglich sind. Mit dem Aufkommen von jQuery und anderen Javascript-Frameworks ist dies jetzt so gut wie kein Problem mehr.

Klassen sind wie Kategorien. Viele HTML-Elemente können zu einer Klasse gehören, und ein HTML-Element kann mehr als eine Klasse 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 sonst darf dieselbe ID haben. IDs werden verwendet, um eindeutige Stile auf ein HTML-Element anzuwenden.

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 Header- und Inhaltsabschnitte über #header und #content gestaltet werden. Jeder Abschnitt des Inhalts kann über #content .section auf einen gemeinsamen Stil angewendet werden. Nur zum Spaß habe ich eine "spezielle" Klasse für den Mittelteil hinzugefügt. Angenommen, Sie möchten, dass ein bestimmter Abschnitt ein spezielles Design hat. Dies kann mit der .special-Klasse erreicht werden, der Abschnitt erbt jedoch weiterhin die allgemeinen Stile von #content .section.

Wenn ich JavaScript oder CSS entwickle, verwende ich normalerweise IDs, um auf ein bestimmtes HTML-Element zuzugreifen / es zu bearbeiten, und ich verwende Klassen, um auf Stile zuzugreifen / sie auf eine breite Palette von Elementen anzuwenden.

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

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. Vermeiden Sie in solchen Fällen Klassen, die zum Anwenden von CSS verwendet werden, und fügen Sie stattdessen neue Klassen hinzu, die kein entsprechendes CSS haben. Dies ist hilfreich, wenn Sie das CSS für eine Klasse oder den CSS-Klassennamen für ein Element insgesamt ändern müssen.

Der CSS-Auswahlbereich ermöglicht tatsächlich einen bedingten ID-Stil:

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

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

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}

Ich finde es etwas pervers, verschachtelte IDs zur Unterscheidung der Behandlung zu verwenden. Wissen Sie nur, dass verschachtelte IDs zur Norm werden , wenn Entwickler in der Sass / SCSS- Welt dieses Zeug in die Hände bekommen.

Wenn es um die Leistung und den Vorrang der Selektoren geht, gewinnt ID tendenziell. Dies ist ein ganz anderes Thema.

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, das 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 kann der zugehörige Abschnitt auf der rechten Seite einen spezifischen Stil haben, der nicht an anderer Stelle wiederverwendet wird. Er würde eine ID verwenden.

Technisch gesehen können Sie Klassen für alles verwenden oder sie logisch aufteilen. Sie können IDs jedoch nicht für mehrere Elemente wiederverwenden.

Klasse dient zum Anwenden Ihres Stils auf eine Gruppe von Elementen. ID-Stile gelten nur für das Element mit dieser ID (es sollte nur einen geben). Normalerweise verwenden Sie Klassen, aber wenn es eine einmalige gibt, können Sie IDs verwenden (oder den Stil einfach direkt in das Element stecken).

In fortgeschrittenen Entwicklungs- IDs können wir grundsätzlich JavaScript verwenden.

Für wiederholbare Zwecke sind Klassen praktisch, im Gegensatz zu IDs , die eindeutig sein sollen.

Unten sehen Sie 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 können Sie hier sehen boxund box1sind zwei (2) verschiedene <div>Elemente, aber wir können die boxund bg-color-redKlassen auf beide anwenden .

Das Konzept ist die Vererbung in einer OOP- Sprache.

1) Die 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) Stilelemente verweisen immer auf eine div-Klasse, indem sie a setzen. (Punkt) vor ihren Namen, während auf die div id-Klasse verwiesen wird, indem ein # (Hash) vor ihre Namen gesetzt wird.

4) Beispiel: -

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

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

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

idund classsind zwei globale / Standard-HTML-Attribute (Die folgenden globalen Attribute können für jedes HTML-Element verwendet werden.)

class Gibt einen oder mehrere Klassennamen für ein Element an (bezieht sich auf eine Klasse in einem Stylesheet).

id Gibt eine eindeutige ID für ein Element an

Die ID-Attribute geben einen elementdokumentweiten eindeutigen Bezeichner an, wobei das Klassenattribut eine Möglichkeit zum Klassifizieren ähnlicher Elemente bietet.

Der ID-Attributwert muss auf der gesamten HTML-Seite eindeutig sein, auf der das Klassenattribut überall dort wiederverwendet werden kann, wo Sie dieselben Eigenschaften anwenden möchten

Die Klasse wird für mehrere Elemente mit gemeinsamen Attributen verwendet. Wenn Sie beispielsweise für p- und body-Tags dieselbe Farbe und Schriftart verwenden möchten, verwenden Sie das Klassenattribut oder in einer Abteilung selbst.

Die ID hingegen wird zum Hervorheben einzelner Elementattribute verwendet und ausschließlich für ein bestimmtes Element verwendet. Beispielsweise haben wir ein h1-Tag mit einigen Attributen, die nicht in anderen Elementen auf der Seite wiederholt werden sollen.

Es sollte beachtet werden, dass, wenn wir Klasse und ID beide in einem Element verwenden, * id die Klassenattribute überschreibt. * Einfach, weil id ausschließlich für ein einzelnes Element ist

Siehe das folgende Beispiel

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Wir generieren die Ausgabe

Ausgabe