Was macht der * * CSS-Selektor?

97

Vor kurzem stieß ich auf * *in CSS .

Site-Referenz - Site-Link .

Für eine einzelne *Verwendung im CSS-Stylesheet wird der Internet- und Stapelüberlauf mit Beispielen überflutet, aber ich bin mir nicht sicher, ob zwei * *Symbole in CSS verwendet werden sollen.

Ich habe es gegoogelt, konnte aber keine relevanten Informationen dazu finden, da ein einzelnes *Element alle Elemente auswählt, aber ich bin nicht sicher, warum die Site es zweimal verwendet hat. Was ist der fehlende Teil dafür und warum wird dieser Hack verwendet (wenn es sich um einen Hack handelt)?

html css css-selectors

— Swapnesh
quelle

138

Wie jedes Mal, wenn Sie zwei Selektoren nacheinander setzen (zum Beispiel li a), erhalten Sie den Nachkommen-Kombinator. Dies * *gilt auch für jedes Element, das von einem anderen Element abstammt - mit anderen Worten, für jedes Element, das nicht das Stammelement des gesamten Dokuments ist.

— Hobbs
quelle

Danke für die Antwort ... das ist es, woran ich gedacht habe, aber ich bin mir nicht sicher, ob ich es von der Community verlangen soll. Ich werde es bald akzeptieren. +1

— Swapnesh

1

Nur noch eine Frage: Ist es wirklich relevant, * * zu verwenden? als ob ich das Konzept

— verstehe

2

@ Swapnesh es sieht aus wie ein Browser-Hack. Es gibt eine * { font-size: XXX }Regel und eine * * { font-size: YYY }Regel. Einer davon gilt für die meisten Browser, der andere für Browser mit einem bestimmten Fehler, obwohl ich nicht die Geduld habe, die Details herauszufinden. Es ähnelt dem * htmlHack, der früher häufig verwendet wurde, um alte IE zu erkennen.

— Hobbs

Danke, dass du den letzten detaillierten Block unter den Kommentaren hinzugefügt hast. Es ist fast perfekt. Dafür musst du nicht mehr Brainstorming machen. Vielen Dank :)

— Swapnesh

10

Beachten Sie, dass in der Art * html, * * wird in IE6 das HTML - Element entsprechen.

— Alohci

80

Nur ein kleines großes Beispiel:

Versuchen Sie, dies auf Ihrer Website hinzuzufügen:

* { 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; }

Demo: http://jsfiddle.net/l2aelba/sFSad/

Beispiel 2:

Demo: http://jsfiddle.net/l2aelba/sFSad/34/

— l2aelba
quelle

7

Dies ist nicht unbedingt die Antwort, aber was für eine schöne Visualisierung!

— aboy021

1

@ l2aelba wirklich eine schöne Erklärung :) +1

— Swapnesh

33

* *Entspricht allem außer dem Element der obersten Ebene, z html.

— Frambot
quelle

Danke Joe, habe es hier und auch nach den obigen Kommentaren getestet : Der * *Selektor entspricht html *für alle Browser außer dem alten guten IE6 :-)

— Stano

@Stano * *entspricht html *... für eine HTML-Datei. CSS kann jedoch auch zum Stylen anderer Arten von Dokumenten verwendet werden (insbesondere SVG).

— Sylvain Leroux

11

* bedeutet, bestimmte Stile auf alle Elemente anzuwenden.

* *bedeutet, bestimmte Stile auf alle untergeordneten Elemente des Elements anzuwenden. Beispiel:

body > * {
  margin: 0;
}

Dies wendet Randstile auf alle untergeordneten Elemente des Körpers an. Gleicher Weg,

* * {
  margin: 0;
}

gilt margin: 0für *die untergeordneten Elemente. Kurz gesagt, es gilt margin: 0für fast jedes Element.

Im Allgemeinen ist einer *genug. Es sind keine zwei nötig * *.

— CrazyFellow
quelle

2

Danke für die Erklärung +1 .. obwohl selbst ich nicht sicher bin, was Sie gerade in der letzten Zeile erwähnt haben "Im Allgemeinen ist * genug. Es gibt keine Notwendigkeit für * *. Ich denke."

— Swapnesh

3

* *Wendet Stile auf untergeordnete Elemente an, nicht auf untergeordnete Elemente. Untergeordnete Elemente wären >wie in Ihrem Beispiel nicht der Raum. Nachkomme und Kind sind nicht dasselbe.

— BoltClock

7

Das wählt alle Elemente aus, die in einem anderen Element verschachtelt sind, auf die gleiche Weise div a, wie alle <a>Elemente ausgewählt werden, die irgendwo in einem <div>Element verschachtelt sind .

— Mike Brant
quelle