Cosa fa un asterisco (*) in un selettore CSS?

98

Ho trovato questo codice CSS e l'ho eseguito per vedere cosa fa e ha delineato OGNI elemento sulla pagina,

Qualcuno può spiegare cosa fa l'asterisco * nei 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>

css css-selectors

— JasonDavis
fonte

@jasondavis - Questa domanda è specifica per il tuo codice o vorrei semplicemente fare una nuova domanda. La tua pagina mostra più contorni con colori diversi? L'unico modo in cui posso produrre colori diversi in questo modo è se specifichi un tag quindi * IE div * { outline ...}e * { outline ... }. Se uso * { outline ... }e viene utilizzata * * { outline ... }solo l'ultima descrizione css.

— JabberwockyDecompiler

95

È un carattere jolly, questo significa che selezionerà tutti gli elementi all'interno di quella parte del DOM.

Ad esempio, se voglio applicare un margine a ogni elemento dell'intera pagina puoi utilizzare:

* {
    margin: 10px;
}

Puoi anche usarlo all'interno delle sotto-selezioni, ad esempio quanto segue aggiungerebbe un margine a tutti gli elementi all'interno di un tag di paragrafo:

p * {
    margin: 10px;
}

Il tuo esempio sta facendo qualche trucco CSS per applicare bordi e margini consecutivi agli elementi per dare loro più bordi colorati. Ad esempio, un bordo bianco circondato da un bordo nero.

— Soviut
fonte

Qual è il vantaggio dell'utilizzo p *rispetto al solo utilizzo p?

— Solomon Closson

7

Non c'è un "vantaggio", è solo il modo in cui selezioni tutti gli elementi discendenti all'interno di un ptag. Quindi, se si ha un span, b, strong, img, ecc all'interno del vostro punto, sarebbe selezionare quelli e applicare gli stili a loro.

— Soviut

30

Il CSS a cui hai fatto riferimento è molto utile per un web designer per il debug dei problemi di layout di pagina. Spesso lo trascino temporaneamente nella pagina in modo da poter vedere la dimensione di tutti gli elementi della pagina e rintracciare, ad esempio, quello che ha troppa imbottitura che spinge altri elementi fuori posto.

Lo stesso trucco può essere fatto solo con la prima riga, ma il vantaggio di definire più contorni è che si ottiene un indizio visivo tramite il colore del bordo sulla gerarchia degli elementi nidificati della pagina.

— Tom
fonte

2

Anche se oggigiorno i browser integrati negli ispettori sono molto più efficaci, no? O usando firebug.

— Lawrence Dol,

@SoftwareMonkey - Sì, in questi giorni è vero. Gli ispettori integrati sono fantastici. Ad esempio, io uso Chrome e Ctrl+Shift+cpoi passo il mouse su un elemento e Chrome colora lo sfondo. Molto più veloce che inserire questo stile di asterisco nel CSS.

— Tom,

1

Sebbene la risposta di Soviut sia vera, questa risposta avrebbe dovuto essere contrassegnata come risposta corretta, perché questa è la risposta esatta per la domanda posta.

— Billy Samuel

4

* è un carattere jolly. Ciò che significa è che applicherà lo stile a qualsiasi elemento HTML. Gli * aggiuntivi applicano lo stile a un livello di annidamento corrispondente.

Questo selettore applicherà contorni colorati diversi a tutti gli elementi di una pagina, a seconda del livello di nidificazione degli elementi.

— futureelite7
fonte

4

* agisce come un carattere jolly, proprio come nella maggior parte degli altri casi.

Se fate:

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

Quindi tutti gli elementi HTML avranno quegli stili.

— Mike Trpcic
fonte

0

nel tuo foglio di stile, di solito devi definire una regola di base per tutti gli elementi come l'attributo della dimensione del carattere ei margini. {dimensione carattere: 14 px; margine: 0; padding: 0;} / overide le impostazioni predefinite del browser sugli elementi, tutte le dimensioni dei caratteri del testo verranno renderizzate come dimensioni di 14 pixel con margine e padding zero, inclusi h1, ... pre. * /

— Mikel bradley benjamin
fonte