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

Question

Ho trovato questo codice CSS e l'ho eseguito per vedere cosa fa e ha delineato OGNI elemento nella 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>

Answer 1

È 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 tutti gli elementi della mia intera pagina, puoi usare:

* {
    margin: 10px;
}

Puoi anche utilizzarlo all'interno delle sottoselezioni, ad esempio ciò che segue aggiungerebbe un margine a tutti gli elementi all'interno di un tag di paragrafo:

p * {
    margin: 10px;
}

Il tuo esempio sta facendo alcuni trucchi 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.

Answer 2

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

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 alla gerarchia degli elementi di pagina nidificati.

Answer 3

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

Questo selettore applica contorni colorati diversi a tutti gli elementi di una pagina, a seconda del livello di annidamento degli elementi.

Answer 4

* funge da jolly, proprio come nella maggior parte degli altri casi.

Se lo fai:

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

Quindi tutti gli elementi HTML avranno quegli stili.

Answer 5

nel tuo foglio di stile, di solito devi definire una regola di base per tutti gli elementi come l'attributo della dimensione del carattere e i margini. {font-size: 14px; margin: 0; padding: 0;} / sovrascrivendo le impostazioni predefinite del browser sugli elementi, tutte le dimensioni del carattere del testo verranno visualizzate come 14 pixel con margine zero e riempimento, tra cui h1, ... pre. * /