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

Encontré este código CSS y lo ejecuté para ver qué hace y describió CADA elemento en la página,

¿Alguien puede explicar lo que el Asterisk * hace en CSS?

 * { 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 }  

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

Por ejemplo, si quiero aplicar un margen a cada elemento en toda mi página, puede usar:

 * { margin: 10px; } 

También puede usar esto dentro de sub-selecciones, por ejemplo, lo siguiente agregaría un margen a todos los elementos dentro de una etiqueta de párrafo:

 p * { margin: 10px; } 

Su ejemplo es hacer algunos trucos css para aplicar fronteras y márgenes consecutivos a los elementos para darles varios bordes de colores. Por ejemplo, un borde blanco rodeado por un borde negro.

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 varios esquemas es que se obtiene una pista visual a través del color del borde de la jerarquía de los elementos de página nesteds.

* 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, según el nivel de anidación de los elementos.

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

Si lo haces:

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

Entonces todos los elementos HTML tendrán esos estilos.

en su hoja de estilo, normalmente 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;} / overide configuración predeterminada del navegador en elementos, todo el tamaño de fuente de texto se representará como 14 píxeles de tamaño con margen cero y relleno, incluyendo h1, … pre. * /