Cosa fa il * * selettore CSS?

97

Recentemente mi sono imbattuto * *in CSS .

Riferimento al sito - Collegamento al sito .

Per un singolo *utilizzo nel foglio di stile CSS, Internet e Stack Overflow sono inondati di esempi, ma non sono sicuro di utilizzare due * *simboli in CSS.

L'ho cercato su Google, ma non sono riuscito a trovare alcuna informazione pertinente su questo, poiché un singolo *seleziona tutti gli elementi, ma non sono sicuro del motivo per cui il sito lo ha utilizzato due volte. Qual è la parte mancante per questo e perché viene utilizzato questo hack (se è un hack)?

html css css-selectors

— swapnesh
fonte

138

Proprio come ogni altra volta che metti due selettori uno dopo l'altro (ad esempio li a), ottieni il combinatore discendente. Quindi * *qualsiasi elemento discendente di qualsiasi altro elemento, in altre parole, qualsiasi elemento che non sia l'elemento radice dell'intero documento.

— hobbs
fonte

grazie per la risposta..questo è quello a cui stavo pensando ma non sono sicuro così ho pensato di chiedere alla comunità..la accetterò presto +1

— swapnesh

1

solo un'altra cosa da chiedere: è davvero rilevante usare * *? come anche se capisco il concetto ma non lo

— capisco

2

@swapnesh sembra un hack del browser. C'è una * { font-size: XXX }regola e una * * { font-size: YYY }regola. Uno di questi si applica alla maggior parte dei browser e l'altro si applica ai browser con un certo bug, anche se non ho la pazienza di capire i dettagli. È simile * htmlall'hack che era di uso comune per rilevare il vecchio IE.

— hobbs

grazie per aver aggiunto l'ultimo blocco dettagliato sotto i commenti..è quasi perfetto..non c'è bisogno di fare più brain storming per quello :) grazie mille :)

— swapnesh

10

Si noti che alla maniera di * html, * * sarà abbinare l'elemento HTML in IE6.

— Alohci

80

Solo un piccolo grande esempio:

Prova ad aggiungere questo sul tuo sito:

* { 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/

Esempio 2:

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

— l2aelba
fonte

7

Questa non è esattamente la risposta, ma che bella visualizzazione!

— aboy021

1

@ l2aelba davvero un bel pezzo di spiegazione :) +1

— swapnesh

33

* *Corrisponde a tutto tranne l'elemento di primo livello, ad esempio html.

— Frambot
fonte

Grazie Joe, l'ho provato qui e anche in base ai commenti sopra: il * *selettore è equivalente a html *per tutti i browser tranne il buon vecchio IE6 :-)

— Stano

@Stano * *equivale a html *... per un file HTML. Ma i CSS possono essere usati per modellare altri tipi di documenti (SVG in particolare).

— Sylvain Leroux

11

* significa applicare gli stili dati a tutti gli elementi.

* *significa applicare gli stili dati a tutti gli elementi figlio dell'elemento. Esempio:

body > * {
  margin: 0;
}

Questo applica gli stili di margine a tutti gli elementi figlio di body. Stessa strada,

* * {
  margin: 0;
}

si applica margin: 0agli *elementi figlio di. In breve, si applica margin: 0a quasi tutti gli elementi.

In genere, uno *è sufficiente. Non ce n'è bisogno per due * *.

— CrazyFellow
fonte

2

grazie per la spiegazione +1 .. anche se anche io non sono sicuro di quello che hai appena menzionato nell'ultima riga "Generalmente, * è sufficiente. Non c'è bisogno di * *. Immagino."

— swapnesh

3

* *applica gli stili agli elementi discendenti , non agli elementi figlio. Gli elementi figlio sarebbero >come nel tuo esempio, non lo spazio. Discendente e bambino non sono la stessa cosa.

— BoltClock

7

Questo seleziona tutti gli elementi annidati all'interno di un altro elemento più o meno allo stesso modo div aselezionerebbe tutti gli <a>elementi annidati da qualche parte all'interno di un <div>elemento.

— Mike Brant
fonte