¿Qué hace un Asterisco (*) en un selector de CSS?

Question

me encontré con este código CSS y me encontré con él para ver lo que hace y lo esbozado todos los elementos en la página,

Puede alguien explicar lo que el asterisco * hace en 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

Es un comodín, esto significa que seleccionará todos los elementos dentro de esa parte del DOM.

Por ejemplo, si quiero aplicar margen a cada elemento en toda mi página podrá utilizar:

* { 
    margin: 10px; 
} 

Usted puede también utilizar esto dentro de sub-selecciones, por ejemplo, lo siguiente sería añadir un margen a todos elementos dentro de una etiqueta de párrafo:

p * { 
    margin: 10px; 
} 

Su ejemplo está haciendo algún truco CSS para aplicar bordes y márgenes consecutivos a los elementos para darles múltiples fronteras de color. Por ejemplo, un borde blanco rodeado por un borde negro.

Answer 2

* es un comodín. Lo que significa es que aplicará el estilo a cualquier elemento HTML. Los * adicionales aplican el estilo al nivel correspondiente de anidación.

Este selector aplicará diferentes contornos de colores a todos los elementos de una página, dependiendo del nivel de anidación de los elementos.

Answer 3

* actúa como un comodín, al igual que en la mayoría de las demás instancias.

Si lo hace:

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

Entonces todos los elementos HTML tendrá esos estilos.

Answer 4

El CSS al que hizo referencia es muy útil para un diseñador web para la depuración de problemas de diseño de página. A menudo lo dejo caer en la página temporalmente para poder ver el tamaño de todos los elementos de la página y rastrear, por ejemplo, el que tiene demasiado relleno que empuja a otros elementos fuera de lugar.

El mismo truco se puede hacer con solo la primera línea, pero la ventaja de definir múltiples contornos es que se obtiene una pista visual a través del color del borde de la jerarquía de los elementos de página anidados.

Answer 5

en su hoja de estilos, por lo general, necesita definir una regla básica para todos los elementos, como el atributo del tamaño de fuente y los márgenes. {font-size: 14px; margen: 0; padding: 0;} / sobre la configuración predeterminada del navegador en los elementos, todo el tamaño de fuente del texto se representará como un tamaño de 14 píxeles con margen cero y relleno, incluido h1, ... pre. */