CSS-ID-Selektor

ID-Selektor

ID-Selektoren können spezifische Stile für HTML-Elemente mit bestimmten IDs bestimmen.

ID-Selektoren werden mit "#" definiert.

Die folgenden beiden ID-Selektoren können die Farbe eines Elements in rot oder grün definieren:

#red {color:red;}
#green {color:green;}

In den folgenden HTML-Code wird der p-Element mit der ID 'red' rot dargestellt und der p-Element mit der ID 'green' grün dargestellt.

<p id="red">Dieser Absatz ist rot.</p>
<p id="green">Dieser Absatz ist grün.</p>

Hinweis:Die ID-Attribut kann in jedem HTML-Dokument nur einmal auftreten. Möchten Sie wissen, warum? Bitte lesen Sie XHTML: Website-Rekonstruktion.

ID-Selektor und abgeleiteter Selektor

In modernen Layouts wird der ID-Selektor oft verwendet, um abgeleitete Selektoren zu erstellen.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Diese Styles werden nur auf Absätze angewendet, die sich im Element mit der ID 'sidebar' befinden. Dieses Element ist wahrscheinlich ein div oder eine Tabellenzelle, obwohl es auch ein Tisch oder ein anderer Block-Element sein könnte. Es könnte sogar ein Inline-Element sein, wie <em></em> oder <span></span>, aber diese Verwendung ist unzulässig, weil man nicht einen <p> in ein Inline-Element <span> einbetten kann (falls Sie den Grund vergessen haben, lesen Sie bitte XHTML: Website-Rekonstruktion)

Ein Selektor, mehrere Anwendungen

Selbst wenn ein Element als sidebar markiert ist, kann es im Dokument nur einmal auftreten. Dieser ID-Selektor kann jedoch als abgeleiteter Selektor viele Male verwendet werden:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Hier werden die p-Elemente im sidebar speziell behandelt, die mit anderen p-Elementen auf der Seite明显不同. Gleichzeitig werden die h2-Elemente im sidebar ebenfalls unterschiedlich behandelt, was von den anderen h2-Elementen auf der Seite unterscheidet.

Einzelnere Selektoren

Ein ID-Selektor kann auch unabhängig von der Erstellung abgeleiteter Selektoren wirken:

#sidebar {
	border: 1px gepunktet #000;
	padding: 10px;
	}

Laut dieser Regel wird dem Element mit der ID 'sidebar' ein schwarzer gepunkteter Rahmen von einem Pixel Breite und ein Innenabstand von 10 Pixeln zugeordnet. Ältere Versionen von Windows/IE-Browser könnten diese Regel ignorieren, es sei denn, Sie definieren speziell den Elementtyp, dem dieser Selektor zugeordnet ist:

div#sidebar {
	border: 1px gepunktet #000;
	padding: 10px;
	}

Verwandte Inhalte

Wenn Sie tiefere Kenntnisse über ID-Selektoren benötigen, lesen Sie bitte das fortgeschrittene Tutorial von CodeW3C.com:CSS-ID-Selektor detailliert.