¿Cuál es la diferencia al aplicar CSS a html, body y al selector universal *?

Question

¿En qué se diferencian estas tres reglas cuando se aplican al mismo 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; 
   } 
   

   Esta regla se aplica a los colores del elemento html. Todos los descendientes del elemento html heredan su color (pero no background-color), incluido body. El elemento body no tiene un color de fondo predeterminado, lo que significa que es transparente, por lo que el fondo de html se mostrará hasta y a menos que establezca un fondo para body.

   Aunque el fondo de html está pintado sobre toda la ventana gráfica, el elemento html en sí mismo no abarca toda la altura de la ventana gráfica automáticamente; el fondo simplemente se propaga a la ventana gráfica. Ver this answer para más detalles.

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

   Esta regla se aplica a los colores del elemento body. Todos los descendientes del elemento body heredan su color.

   De manera similar a la forma en el fondo de html se propaga automáticamente a la vista, el fondo de body se propagará a html automáticamente, hasta ya menos que establezca un fondo para html también. Ver this answer para una explicación. Debido a esto, si solo necesita un fondo (en circunstancias normales), si usa la primera regla o la segunda no hará una diferencia real. Sin embargo, puede combinar los estilos de fondo para html y body con otros trucos para obtener efectos de fondo ingeniosos, como I've done here. Vea la respuesta vinculada anterior para saber cómo.

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

   Esta regla se aplica a los colores cada elemento, así que ninguno de los dos propiedades se hereda de forma implícita. Pero puede anular fácilmente esta regla con cualquier otra cosa, incluidas cualquiera de las dos reglas anteriores, ya que * no tiene literalmente ningún significado en la especificidad del selector.

   Debido a esto rompe la cadena de herencia por completo para cualquier propiedad que normalmente se hereda como color, el establecimiento de esas propiedades en una regla * se considera una mala práctica a menos que tenga una buena razón muy a interrumpir la herencia de esta manera (la mayoría del uso los casos que implican romper la herencia requieren que lo haga solo por un elemento, no todos de ellos).