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

98

Eu encontrei este código CSS e o executei para ver o que ele faz e descreve TODOS os elementos da página,

Alguém pode explicar o que o Asterisk * faz no 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>
css css-selectors JasonDavis
fonte
@jasondavis - Esta pergunta é específica ao seu código ou eu gostaria apenas de fazer uma nova pergunta. A sua página exibe vários contornos com cores diferentes? A única maneira de produzir cores diferentes assim é se eu especificar uma tag, em seguida, * IE div * { outline ...}e * { outline ... }. Se eu usar * { outline ... }e * * { outline ... }apenas a última descrição css será usada.
JabberwockyDecompiler

Respostas:

95

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

Por exemplo, se eu quiser aplicar margem a todos os elementos de minha página inteira, você pode usar:

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

Seu exemplo está fazendo alguns truques de CSS para aplicar bordas e margens consecutivas a elementos para dar a eles bordas coloridas. Por exemplo, uma borda branca cercada por uma borda preta.

Soviut
fonte
Qual é a vantagem de usar p *em oposição a apenas usar p?
Solomon Closson de
7
Não há uma "vantagem", é apenas como você seleciona todos os elementos descendentes dentro de uma ptag. Então, se você tivesse um span, b, strong, img, etc. dentro de seu parágrafo, ele deve selecionar aqueles e aplicar os estilos para eles.
Soviut de
30

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

O mesmo truque pode ser feito apenas com a primeira linha, mas a vantagem de definir vários contornos é que você obtém uma dica visual por meio da cor da borda da hierarquia dos elementos da página aninhados.

Tom
fonte
2
Embora atualmente os inspetores embutidos no navegador sejam muito mais eficazes, não? Ou usando o firebug.
Lawrence Dol
@SoftwareMonkey - Sim, atualmente isso é verdade. Os inspetores integrados são ótimos. Por exemplo, eu uso o Chrome e, em Ctrl+Shift+cseguida, passo o mouse sobre um elemento e o Chrome pinta o fundo. Muito mais rápido do que inserir esse estilo de asterisco no CSS.
Tom
1
Embora a resposta de Soviut seja verdadeira, essa resposta deveria ter sido marcada como a resposta correta, porque esta é a resposta exata para a pergunta feita.
Billy Samuel
4

* é um curinga. O que significa é que aplicará o estilo a qualquer elemento HTML. * Adicionais aplicam o estilo a um nível correspondente de aninhamento.

Este seletor aplicará contornos de cores diferentes a todos os elementos de uma página, dependendo do nível de aninhamento dos elementos.

Futureelite7
fonte
4

* atua como um caractere curinga, assim como na maioria das outras instâncias.

Se você fizer:

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

Então, todos os elementos HTML terão esses estilos.

Mike Trpcic
fonte
0

em sua folha de estilo, normalmente você precisa definir uma regra básica para todos os elementos, como atributo de tamanho de fonte e margens. {tamanho da fonte: 14px; margem: 0; padding: 0;} / overide a configuração padrão do navegador em elementos, todo o tamanho da fonte do texto será processado como tamanho de 14 pixels com margem zero e preenchimento, incluindo h1, ... pre. * /

Mikel Bradley Benjamin
fonte