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

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

¿Puede alguien explicar qué hace el Asterisco * 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>
Author: BoltClock, 2009-07-30
Source

5 answers

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

Por ejemplo, si quiero aplicar margen a cada elemento de toda mi página puedes usar:

* {
    margin: 10px;
}

También puede usar esto dentro de las 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 está haciendo algunos trucos css para aplicar bordes y márgenes consecutivos a los elementos para darles múltiples bordes de color. Para ejemplo, un borde blanco rodeado por un borde negro.

 88
Author: Soviut,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-07-30 03:43:52

El CSS al que hace referencia es muy útil para un diseñador web para depurar problemas de diseño de página. A menudo lo coloco 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 está empujando 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 a la jerarquía de los anidados elementos de página.

 29
Author: Tom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-10 12:49:45

* es un comodín. Lo que significa es que aplicará el estilo a cualquier elemento HTML. Adicional * ' s aplicar el estilo a un nivel correspondiente de anidamiento.

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

 4
Author: futureelite7,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-07-30 03:20:08

* actúa como un comodín, al igual que en la mayoría de los otros casos.

Si lo haces:

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

Entonces todos los elementos HTML tendrán esos estilos.

 4
Author: Mike Trpcic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-10 07:56:35

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

 0
Author: Mikel bradley benjamin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-14 02:32:39