Qual è la differenza nell'applicare CSS a html, body e al selettore universale *?

Question

In che modo queste tre regole sono diverse quando vengono applicate allo stesso documento HTML?

html { 
    color: black; 
    background-color: white; 
} 

body { 
    color: black; 
    background-color: white; 
} 

* { 
    color: black; 
    background-color: white; 
} 

Answer 1

1. html { 
       color: black; 
       background-color: white; 
   } 
   

   Questa regola si applica i colori all'elemento html. Tutti i discendenti dell'elemento html ereditano il proprio color (ma non background-color), incluso body. L'elemento body non ha un colore di sfondo predefinito, il che significa che è trasparente, quindi lo sfondo di html verrà visualizzato fino a quando ea meno che non si imposta uno sfondo per body.

   Sebbene lo sfondo di html sia dipinto sull'intera finestra, l'elemento html non copre automaticamente l'intera altezza della finestra; lo sfondo viene semplicemente propagato al viewport. Vedi this answer per i dettagli.

2. body { 
       color: black; 
       background-color: white; 
   } 
   

   Questa regola si applica i colori all'elemento body. Tutti i discendenti dell'elemento body ereditano il proprio color.

   Allo stesso modo di come lo sfondo di html si propaga alla finestra automaticamente, sullo sfondo di body verrà propagato ai html automaticamente, e fino a meno di impostare uno sfondo per html pure. Vedere this answer per una spiegazione. Per questo motivo, se hai solo bisogno di uno sfondo (in circostanze normali), se utilizzi la prima regola o la seconda regola non farai alcuna differenza.

   È tuttavia possibile combinare gli stili di sfondo per html e body con altri trucchi per ottenere alcuni effetti di sfondo eleganti, come I've done here. Vedi la risposta collegata sopra per come.

3. * { 
       color: black; 
       background-color: white; 
   } 
   

   Questa regola vale per i colori ogni elemento, quindi nessuna delle due proprietà è implicitamente ereditato. Ma puoi facilmente ignorare questa regola con qualsiasi altra cosa, inclusa una delle due precedenti regole, dato che * non ha letteralmente alcun significato nella specificità del selettore.

   Perché questo rompe la catena di ereditarietà completamente per qualsiasi proprietà che normalmente viene ereditata come color, impostando queste proprietà in una regola * è considerato cattiva pratica a meno che non si dispone di una molto buona ragione per rompere l'eredità in questo modo (più uso i casi che implicano una violazione dell'ereditarietà richiedono che lo facciate per un solo elemento, non all di essi).