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

selector padre css

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 aplica los colores al elemento html . Todos los descendientes del elemento html heredan su color (pero no background-color ), incluido el body . El elemento del 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 establezcas un fondo para el body .

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

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

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

   De forma similar a cómo el fondo de html se propaga a la ventana gráfica automáticamente, el fondo del body se propagará a html automáticamente, hasta que, a menos que establezca un fondo para html también. Vea esta respuesta 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 estilos de fondo para html y body con otros trucos para obtener efectos de fondo ingeniosos, como lo he hecho aquí . Vea la respuesta vinculada anterior para saber cómo.

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

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

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