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

StackOverflow https://stackoverflow.com/questions/1204275

  •  05-07-2019
  •  | 
  •  

Frage

Ich habe diesen Code CSS und ich lief, um zu sehen, was es tut und es skizzierte jedes Element auf der Seite,

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

<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>
War es hilfreich?

Lösung

Es ist ein Platzhalter, bedeutet dies, sie alle Elemente innerhalb dieses Teils des DOM auswählen wird.

Zum Beispiel, wenn ich anwenden mag Marge auf jedes Element auf meiner ganzen Seite können Sie: 

* {
    margin: 10px;
}

Sie können dies auch innerhalb der Unter Auswahl verwenden, zum Beispiel nach der eine Marge auf alle Elemente innerhalb eines Absatz-Tag hinzufügen würde: 

p * {
    margin: 10px;
}

Ihr Beispiel macht einige CSS-Tricks aufeinander folgenden Grenzen und Ränder auf Elemente anwenden sie mehrere farbige Grenzen zu geben. Zum Beispiel umgeben einen weißen Rand von einem schwarzen Rand.

Andere Tipps

Die CSS, die Sie verwiesen wird, ist zu einem Web-Designer für das Debuggen Seitenlayout Probleme sehr nützlich. Ich lasse es oft in die Seite vorübergehend, damit ich die Größe aller Seitenelemente sehen können und die Spur, zum Beispiel die, die zu viel Polsterung hat, die andere Elemente deplatziert ist stupste.

Der gleiche Trick kann nur mit der ersten Zeile getan werden, aber der Vorteil der Definition mehrerer Konturen ist, dass Sie einen visuellen Hinweis über die Grenze Farbe der Hierarchie der verschachtelten Seitenelemente erhalten.

* ist ein Platzhalter. Was es bedeutet, ist, dass es um den Stil zu jedem beliebigen HTML-Elemente angewandt werden. Zusätzliche * 's den Stil auf eine entsprechende Ebene der Verschachtelung gelten.

wird dieser Selektor verschiedene farbige Konturen gilt für alle Elemente einer Seite, in Abhängigkeit von der Verschachtelungsebene der Elemente.

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

Wenn Sie das tun: 

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

Dann alle HTML-Elemente werden diese Stile haben.

in Ihrem Stylesheet, usualy müssen Sie Grundregel für alle Elemente wie font-size-Attribut und Margen definieren. {font-size: 14px; margin: 0; padding: 0;} / auf Elementen Standardeinstellung des Browsers overide, all Text-Schriftgröße als 14 Pixelgröße mit Null-Marge und Polsterung, einschließlich h1 gemacht werden, ... vor. * /

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top