CSS * Selektor
Der CSS *-Selektor wählt alle Elemente aus, auch innerhalb anderer Elemente. Lesen Sie mehr und probieren Sie Beispiele aus.
Der * (Asterisk) Selektor ist der universelle Selektor. Er trifft jedes Element im
Dokument, unabhängig von dessen Typ, ID oder Klasse.
In der Regel greift man auf * in zwei Situationen zurück: um allen Elementen einer Seite
einen Basisstil zuzuweisen (ein „Reset"), oder um jeden Nachfahren innerhalb eines
bestimmten Containers anzusprechen, indem man * mit einem anderen Selektor kombiniert.
Dieses Kapitel behandelt die Syntax, zwei ausführbare Beispiele, wie * mit der
Spezifität interagiert, und einen Leistungshinweis, den Sie kennen sollten, bevor Sie ihn
verwenden.
Syntax
* {
/* css declarations */
}Allein verwendet, wählt * jedes Element aus. In Kombination mit einem anderen Selektor
und einem Leerzeichen (einem Nachfahren-Kombinator) wählt er
jedes Element innerhalb dieses Ziels aus:
/* every element inside any <div> */
div * {
/* css declarations */
}Spezifität
Der universelle Selektor hat eine Spezifität von null — (0, 0, 0). Er fügt einer
Regel kein Gewicht hinzu. Das bedeutet, dass fast jeder andere Selektor (ein Tag-Name,
eine Klasse, eine ID) eine Deklaration, die von * stammt, überschreiben wird. Genau
deshalb eignet er sich gut dazu, Standardwerte zu setzen, die spezifischere Regeln dann
verfeinern können.
Beispiel: alle Elemente auswählen
Die folgende Regel färbt den Hintergrund jedes Elements auf der Seite, einschließlich
<html>, <body>, Überschriften und Absätzen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<p id="example2">Lorem ipsum is simply dummy text...</p>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Beispiel: alle Elemente innerhalb eines <div> auswählen
Hier zielt div * nur auf die Elemente ab, die innerhalb eines <div>
verschachtelt sind. Das alleinstehende <p> nach dem <div> behält seinen
Standardhintergrund, während das <p> und das <span> innerhalb des <div> gestylt
werden:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div * {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<span id="example2">Lorem ipsum is simply dummy text...</span>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Ein häufiger Anwendungsfall: ein box-sizing-Reset
Die beliebteste Verwendung von * in der Praxis ist die Normalisierung des Box-Modells,
sodass Abstände (Padding) und Rahmen (Borders) die Breite eines Elements nicht mehr
vergrößern. Dieses Snippet findet sich in unzähligen Stylesheets:
*,
*::before,
*::after {
box-sizing: border-box;
}Siehe box-sizing, um zu erfahren, was border-box verändert.
Leistung und bewährte Praxis
- Sparsam in verschachtelten Selektoren verwenden. Eine Regel mit nur
*ist günstig, aber die Kombination in langen Nachfahren-Ketten (zum Beispiel.nav ul li *) zwingt den Browser dazu, mehr Elemente auszuwerten. Für eine einzelne Reset-Regel ist das vernachlässigbar; vermeiden Sie es jedoch in tief verschachtelten, häufig übereinstimmenden Selektoren. - Bevorzugt für Resets, nicht für das Theming verwenden. Da seine Spezifität
0beträgt, ist*ideal für Standardvorgaben, aber eine schlechte Wahl, wenn eine Regel andere Stile überschreiben soll. - Er trifft Pseudo-Elemente nur auf Anfrage.
*trifft Elemente;*::beforeund*::afterwerden benötigt, um auch generierten Inhalt abzudecken, wie im obigen Reset.
Verwandte Selektoren
- CSS-Selektoren-Übersicht — die vollständige Liste der Selektor-Typen.
- ID- und Klassen-Selektoren — bestimmte Elemente gezielt ansprechen.
:first-child— eine strukturelle Pseudo-Klasse.