Was macht ein Sternchen (*) in einem CSS-Selektor?

98

Ich habe diesen CSS-Code gefunden und ihn ausgeführt, um zu sehen, was er tut, und er hat JEDES Element auf der Seite beschrieben.

Kann jemand erklären, was der Asterisk * in CSS macht?

<style>
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
</style>
css css-selectors JasonDavis
quelle
@jasondavis - Diese Frage ist spezifisch für Ihren Code oder ich würde nur eine neue Frage stellen. Zeigt Ihre Seite mehrere Konturen mit unterschiedlichen Farben an? Der einzige Weg, wie ich verschiedene Farben wie diese erzeugen kann, ist, wenn ich ein Tag spezifiziere, dann * IE div * { outline ...}und * { outline ... }. Wenn ich benutze * { outline ... }und * * { outline ... }nur die letzte CSS-Beschreibung verwendet wird.
JabberwockyDecompiler

Antworten:

95

Es handelt sich um einen Platzhalter. Dies bedeutet, dass alle Elemente in diesem Teil des DOM ausgewählt werden.

Wenn ich beispielsweise auf jedes Element auf meiner gesamten Seite einen Rand anwenden möchte, können Sie Folgendes verwenden:

* {
    margin: 10px;
}

Sie können dies auch in Unterauswahlen verwenden. Beispielsweise würde Folgendes allen Elementen in einem Absatz-Tag einen Rand hinzufügen:

p * {
    margin: 10px;
}

In Ihrem Beispiel werden einige CSS-Tricks ausgeführt, um aufeinanderfolgende Ränder und Ränder auf Elemente anzuwenden, um ihnen mehrfarbige Ränder zu geben. Zum Beispiel ein weißer Rand, der von einem schwarzen Rand umgeben ist.

Soviut
quelle
Was ist der Vorteil der Verwendung p *gegenüber der Verwendung p?
Solomon Closson
7
Es gibt keinen "Vorteil", sondern nur die Auswahl aller untergeordneten Elemente innerhalb eines pTags. Wenn Sie also eine haben span, b, strong, imgusw. in Ihrem Absatz, wäre es diejenigen auswählen und die Stile für sie gilt.
Soviut
30

Das CSS, auf das Sie verwiesen haben, ist für einen Webdesigner sehr nützlich, um Probleme mit dem Seitenlayout zu beheben. Ich lege es oft vorübergehend auf der Seite ab, damit ich die Größe aller Seitenelemente sehen und beispielsweise die mit zu viel Polsterung aufspüren kann, die andere Elemente an ihren Platz bringt.

Der gleiche Trick kann nur mit der ersten Zeile ausgeführt werden. Der Vorteil der Definition mehrerer Konturen besteht jedoch darin, dass Sie über die Rahmenfarbe einen visuellen Hinweis auf die Hierarchie der verschachtelten Seitenelemente erhalten.

Tom
quelle
2
Obwohl die in Inspektoren integrierten Browser heutzutage viel effektiver sind, nicht wahr? Oder mit Firebug.
Lawrence Dol
@ SoftwareMonkey - Ja, heutzutage stimmt das. Die eingebauten Inspektoren sind großartig. Zum Beispiel verwende ich Chrome und bewege Ctrl+Shift+cdann den Mauszeiger über ein Element, und Chrome färbt den Hintergrund. Viel schneller, als dieses Sternchen in das CSS einzufügen.
Tom
1
Obwohl die Antwort von Soviut wahr ist, sollte diese Antwort als die richtige Antwort markiert worden sein, da dies die genaue Antwort auf die gestellte Frage ist.
Billy Samuel
4

* ist ein Platzhalter. Dies bedeutet, dass der Stil auf jedes HTML-Element angewendet wird. Zusätzliche * wenden den Stil auf eine entsprechende Verschachtelungsebene an.

Dieser Selektor wendet abhängig von der Verschachtelungsebene der Elemente auf alle Elemente einer Seite unterschiedlich farbige Umrisse an.

futureelite7
quelle
4

* fungiert wie in den meisten anderen Fällen als Platzhalter.

Wenn Sie tun:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

Dann haben alle HTML-Elemente diese Stile.

Mike Trpcic
quelle
0

In Ihrem Stylesheet müssen Sie normalerweise die Grundregel für alle Elemente wie das Schriftgrößenattribut und die Ränder definieren. {Schriftgröße: 14px; Rand: 0; Auffüllen: 0;} / Über die Standardeinstellung des Browsers für Elemente hinaus wird die gesamte Textschriftgröße als 14-Pixel-Größe mit Nullrand und Auffüllung einschließlich h1, ... pre gerendert. * /

Mikel Bradley Benjamin
quelle