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

Question

Ho trovato questo codice CSS e mi sono imbattuto per vedere cosa fa e ha delineato ogni elemento della pagina,

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

Answer 1

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

Per esempio, se voglio applicare margine per ogni elemento sulla mia intera pagina è possibile utilizzare:

* { 
    margin: 10px; 
} 

È anche possibile utilizzare questo all'interno di sotto-selezioni, ad esempio, il seguente sarebbe aggiungere un margine a tutti elementi all'interno di un tag di paragrafo:

p * { 
    margin: 10px; 
} 

Il tuo esempio sta facendo un po 'di CSS inganno per applicare i bordi consecutivi e margini per gli elementi per dare loro più confini colorati. Ad esempio, un bordo bianco circondato da un bordo nero.

Answer 2

* è un carattere jolly. Ciò significa che applicherà lo stile a qualsiasi elemento HTML. Altro * applica lo stile a un livello corrispondente di nidificazione.

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

Answer 3

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

Se lo fai:

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

Poi tutti elementi HTML avranno quegli stili.

Answer 4

Il codice CSS a cui si fa riferimento è molto utile per un web-designer per il debug dei problemi di impaginazione. Spesso lo faccio cadere temporaneamente nella pagina in modo da poter vedere la dimensione di tutti gli elementi della pagina e rintracciare, per esempio, quella che ha troppa imbottitura che sta spingendo fuori posto altri elementi.

Lo stesso trucco può essere fatto con solo 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 5

nel foglio di stile, normalmente è necessario definire la regola di base per tutti gli elementi, ad esempio attributo e margini della dimensione del carattere. {font-size: 14px; margin: 0; padding: 0;} / overide impostazioni predefinite del browser sugli elementi, tutte le dimensioni dei caratteri del testo saranno visualizzate a 14 pixel con margine e riempimento, compreso h1, ... pre. */