CSS ID-Selektoren im Detail

ID-Selektoren erlauben die Angabe von Stilen auf eine unabhängige Weise von den Dokumentelementen.

CSS ID-Selektor

In einigen Aspekten ähnelt der ID-Selektor dem Class-Selektor, aber es gibt auch wichtige Unterschiede.

Syntax

Zunächst hat der ID-Selektor einen # vorne - auch bekannt als Schachfigur oder Hash-Zeichen.

Sehen Sie sich die folgenden Regeln an:

*#intro {font-weight:bold;}

Wie bei Class-Selektoren können im ID-Selektor Wildcard-Selektoren ignoriert werden. Der vorherige Beispiel kann auch so geschrieben werden:

#intro {font-weight:bold;}

Der Effekt dieses Selektors wird gleich sein.

Der zweite Unterschied ist, dass der ID-Selektor nicht den Wert der class-Attribut referenziert, sondern zweifellos den Wert des id-Attributs.

Hier ist ein Beispiel für einen tatsächlichen ID-Selektor:

<p id="intro"<p>This is a paragraph of introduction.</p>

Versuchen Sie es selbst

Class-Selektor oder ID-Selektor?

Wie in Kapitel über Class-Selektoren erwähnt, können für mehrere Elemente Klassen zugewiesen werden. Im vorherigen Kapitel wurde der Klassenname important auf p und h1-Elemente angewendet und er kann auch auf mehr Elemente angewendet werden.

Unterschied 1: Kann nur einmal im Dokument verwendet werden

Im Gegensatz zu Klassen wird ein ID-Selektor in einem HTML-Dokument nur einmal verwendet und nur einmal.

Unterschied 2: ID-Wortlisten können nicht verwendet werden

Im Gegensatz zu Class-Selektoren können ID-Selektoren nicht kombiniert werden, da das ID-Attribut keine durch Leerzeichen getrennte Wortliste zulässt.

Unterschied 3: IDs können mehr Bedeutung enthalten

Wie Klassen können IDs unabhängig von Elementen ausgewählt werden. In einigen Fällen wissen Sie, dass ein bestimmter ID-Wert in einem Dokument vorkommt, aber nicht, auf welchem Element er vorkommt, daher möchten Sie einen独立的 ID-Selektor deklarieren. Zum Beispiel wissen Sie vielleicht, dass in einem bestimmten Dokument ein Element mit dem ID-Wert mostImportant vorkommt. Sie wissen nicht, ob diese wichtigste Sache ein Absatz, ein Wort, ein Aufzählungspunkt oder ein Abschnittstitel ist. Sie wissen nur, dass jeder Dokument so eine wichtige Inhalte hat, die in jedem Element sein können und nur einmal auftreten können. In diesem Fall können Sie wie folgt schreiben:

#mostImportant {color:red; background:yellow;}

Diese Regel wird mit den folgenden Elementen übereinstimmen (diese Elemente können in einem Dokument nicht gleichzeitig vorkommen, da sie alle die gleiche ID-Wert haben):

<h1 id="mostImportant"Dies ist wichtig!
<em id="mostImportant"Dies ist wichtig!
<ul id="mostImportant">This is important!</ul>

Probieren Sie selbst aus:

Unterscheidungslos

Bitte beachten Sie, dass Klassenselektoren und ID-Selektoren möglicherweise unterscheidungslos sind. Dies hängt vom Sprachstil des Dokuments ab. HTML und XHTML definieren Klassen- und ID-Werte als unterscheidungslos, daher müssen die Groß- und Kleinschreibungen der Klassen- und ID-Werte mit den entsprechenden Werten im Dokument übereinstimmen.

Daher werden die folgenden CSS und HTML nicht fett dargestellt:

#intro {font-weight:bold;}
<p id="Intro"<p>This is a paragraph of introduction.</p>

Da die Groß- und Kleinschreibung des Buchstaben i unterschiedlich ist, werden die Selektoren die obigen Elemente nicht auswählen.