O que faz um asterisco (*) fazer em um seletor CSS?

Question

Eu encontrei este código CSS e eu corri para ver o que ele faz e é descrito cada elemento na página,

alguém pode explicar o que o Asterisk * faz em 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

É um curinga, isso significa que ele irá selecionar todos os elementos dentro dessa parte do DOM.

Por exemplo, se eu quiser aplicar margem para cada elemento em toda a minha página, você pode usar:

* {
    margin: 10px;
}

Você também pode usar isso dentro de sub-seleções, por exemplo, o seguinte seria adicionar uma margem a todos os elementos dentro de uma tag de parágrafo:

p * {
    margin: 10px;
}

Seu exemplo está fazendo alguns truques css para aplicar bordas consecutivas e margens de elementos para dar-lhes várias bordas coloridas. Por exemplo, uma borda branca cercada por uma borda preta.

Answer 2

O CSS que você referenciou é muito útil para um web-designer para depurar problemas de layout de página. Muitas vezes eu solte-o na página temporariamente para que eu possa ver o tamanho de todos os elementos da página e rastrear, por exemplo, aquele que tem muito preenchimento que está cutucando outros elementos fora do lugar.

O mesmo truque pode ser feito com apenas a primeira linha, mas a vantagem de definir vários contornos é que você começa uma pista visual via a cor da borda para a hierarquia dos elementos da página aninhada.

Answer 3

* é um curinga. O que isto significa é que ele vai aplicar o estilo a qualquer elemento HTML. * adicional 's aplicar o estilo para um nível correspondente de aninhamento.

Este seletor irá aplicar diferentes contornos coloridos para todos os elementos de uma página, dependendo do nível de aninhamento das elementos.

Answer 4

* atua como um curinga, assim como na maioria dos outros casos.

Se você fizer isso:

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

Em seguida, todas elementos HTML terá esses estilos.

Answer 5

em sua folha de estilo, usualy você precisa definir regra básica para todos elemento como atributo font-size e margens. {font-size: 14px; margem de: 0; padding: 0;} / configuração padrão do navegador overide em elementos, todos tamanho do texto será processado como 14 tamanho do pixel com margin e padding zero, incluindo h1, ... pré. * /