Wo kann ich IDs und Klassen verwenden? Was ist der Unterschied zwischen ihnen? Ist es notwendig, dass wir in unserem CSS zwingend ids verwenden sollten?Was ist der Unterschied zwischen Klassen und IDs in CSS? Erläutern Sie anhand eines Beispiels, wo Sie verwenden können
IDs sollen eindeutig sein, während Klassen für einen "Typ" von Element besser sind.
So haben Sie vielleicht so etwas wie:
<ul id="menu">
....
</ul>
Da Sie wahrscheinlich nur 1 Hauptmenü auf Ihrer Website haben.
Für Klassen, aber könnten Sie so etwas wie haben:
<span class='author'>Paolo Bergantino</span>
Oder vielleicht die div, um Stil, die auf dieser Website eine Antwort enthält:
<div class='answer'>....</div>
Da wird es von diesen multipel pro Seite sind sie eine Klasse von Elementen. Stellen Sie sich eine ID als Sozialversicherungsnummer eines Elements vor. Immer wenn ein Element wichtig genug ist und einzigartig ist, geben Sie ihm eine ID. Dies hilft auch bei dynamischen Websites, da das Auswählen von Elementen per ID bei weitem der schnellste Weg ist. Wenn Sie mehrere Elemente mit derselben ID haben (wodurch diese Praxis verletzt wird), funktioniert Javascript nicht wie vorgesehen.
Vom w3schools:
Die id Attribut gibt eine eindeutige ID für ein HTML-Element.
Die ID muss innerhalb des HTML-Dokuments eindeutig sein. Änderungen vornehmen oder die Art des Element mit den angegebenen id
Das id-Attribute kann durch einen JavaScript (über den HTML-DOM) oder durch CSS verwendet werden.
und
Die Klasse Attribut spezifiziert einen Klassenname für ein Element.
Das Klassenattribut wird meistens verwendet, um auf eine Klasse in einem Stylesheet zu verweisen. Es kann jedoch auch von einem JavaScript (über das HTML-DOM) verwendet werden, um Änderungen an HTML-Elementen mit einer angegebenen Klasse vorzunehmen.
Die Klasse Attribut kann nicht in folgenden HTML-Elemente verwendet werden: Basis, Kopf, html, meta, param, Skript, Stil und Titel.
Es ist möglich, einem HTML-Element mehrere Klassen zuzuweisen, z. . Dies ermöglicht Ihnen, mehrere CSS Klassen für ein HTML-Element zu kombinieren.
Eine ID bezieht sich auf ein bestimmtes Element (jede ID sollte nie mehr als einmal verwendet werden); Eine Klasse bezieht sich auf mehrere Elemente.
Während Sie Klassen für alles verwenden können, ist die Trennung zwischen "Klassen, die nur einmal vorkommen" (d. H. IDs) und "regulären Klassen" sehr nützlich, um Ihre CSS für sich selbst sinnvoll zu halten.
.menu { ... } /* Err, how many of those did I have? */
#menu { ... } /* Ahh, THE menu. */
Eine ID identifiziert genau ein DOM Element, eindeutig. Eine Klasse identifiziert eine Gruppe verwandter DOM-Elemente.
Zum Beispiel könnten Sie eine einzelne, einzigartige nav-Menü haben, durch eine ID identifiziert:
<div id="nav">...</div>
und in ihm eine Reihe von Menüsets haben, von denen jeder auch eindeutig identifiziert ist und die gehört eine gemeinsame Klasse:
<div id="nav">
<ul id="content_menu" class="menu">...</ul>
<ul id="contact_menu" class="menu">...</ul>
<ul id="personal_menu" class="menu">...</ul>
</div>
Kurz und knapp:
Klassen so oft wie nötig verwendet werden können (und werden durch einen Punkt definiert). IDs können nur für EIN Element verwendet werden (und sind durch ein Pfund definiert).
<style>
.class {
font-size: 3em;
}
#id {
font-size: 3em;
}
</style>
<body>
<span class="class">I am a class</span>
<span class="class">Look at me, also a class</span>
<span id="id">I am special, you can only have one of me or I do not meet XHTML standards</span>
gud Beispiel, schön und dank – Rajasekar
Mögliche doppelte, http://stackoverflow.com/q/544010/425313 –