Video: CSS absolute Basis Infos zu SELEKTOREN! [TUTORIAL] 2025
Nachdem Sie die Arbeit mit benutzerdefinierter Klasse, Tag-Neudefinition und ID-Stilen in Cascading Style Sheets (CSS) beherrschen, können Sie in die großen Ligen von zusammengesetzten Stilen einsteigen. Um zu verstehen, wie man mit zusammengesetzten Stilen arbeitet, müssen Sie zunächst die HTML / CSS-Dokumentbäume verstehen, die die Beziehungen zwischen Objekten innerhalb des Dokuments definieren.
Genau wie Menschen einen Stammbaum haben, können Ihr Dokument und die Objekte darin durch ihre Beziehungen definiert werden. Dies bedeutet, dass Sie die Objekte in Ihren Dokumenten anhand ihrer Beziehung zu anderen Objekten identifizieren können. Jedes Objekt kann Vorfahren, Nachkommen, Eltern, Kinder und Geschwister haben.
Beispielsweise kann die Fußzeile (unterer Abschnitt) einer Webseite eine ungeordnete Liste von verknüpftem Text enthalten. In diesem Szenario ist der übergeordnete Container für die Liste die Fußzeile und die einzelnen Listenelemente sind Geschwister. Wenn die Fußzeile das untergeordnete Element des Tags ist, könnte die Platzierung dieser Liste im Dokumentbaum folgendermaßen aussehen:
Zusammengesetzte Stile sind der Punkt, an dem eine Menge Fußarbeit in CSS entsteht, weil Selektoren in einer Vielzahl geschrieben werden können. von Wegen, einschließlich der folgenden beliebtesten Gebräuche:
-
Pseudoklassen: Eine Pseudoklasse als spezieller Selektor, mit der Sie Elemente formatieren können, die sich nicht in der Dokumentstruktur befinden, z. B. Hyperlinkzustände, erste und letzte untergeordnete Elemente. und aktive Elemente. Mit anderen Worten, sie werden nicht für tatsächliche Elemente verwendet, sondern eher für konzeptionelle Elemente, wie jede andere Zeile in einer Tabelle. Die häufigste Verwendung ist das Erstellen von Stilen für Hyperlinks.
-
Mehrere Selektoren: Um die gleichen Stile auf mehrere Tags anzuwenden, wird der erweiterte Selektor durch Kommas geteilt, entweder mit oder ohne Leerzeichen, wie in body, th, td {…} oder body, th, td { …}.
-
Deszendenten-Selektoren: Auch als erweiterte Kombinatoren bezeichnet, können Sie diese Selektoren verwenden, um sehr spezifische Elemente auf Ihrer Seite zu gestalten, z. B. Nachkommen eines anderen Elements im Dokumentbaum…
Anstatt beispielsweise einen Tag-Stil für alle Listenelemente in Ihrer Site neu zu definieren, können Sie alle Listenelemente in einer geordneten Liste in der Seitenleiste Ihres Layouts mit einem Selektor namens #sidebar ol li ansteuern. Diese Stile können so geschrieben werden, dass sie eine beliebige Kombination von Tags, Tag-Neudefinitionen, ID-Stilen und benutzerdefinierten Klassennamen enthalten.
