/**
* This matches an element with the class `alert` within
* an `article` element
*/
article *.alert { /* ... */ }

Se houver 100% de consistência em um projeto (e o estilo é conhecido por todos os indivíduos que trabalham no projeto), então o primeiro exemplo nunca aconteceria (seria article * *.alert em vez de). No entanto, esta é uma situação ideal e, mais do que provavelmente, desmoronará após algumas gerações de desenvolvedores (as pessoas adoram usar seu próprio estilo). Portanto, mesmo que você tenha um estilo consistente, um novo contratado poderá entrar e escrever em seu próprio estilo por um curto período, ou ler o estilo atual incorretamente e produzir código que não corresponda aos seletores (ou vice-versa). Portanto, eu sugeriria aderir ao padrão que eu vi mais (leia: exclusivamente) em projetos e sites:

Faz não use o asterisco se não for necessário.

Uma rápida olhada na fonte de algumas bem conhecidassites (por exemplo, Facebook, Google, Yahoo, etc) mostram que eles não usam asteriscos, a menos que tenham que fazê-lo (mesmo em estilos não minificados). Você também pode dar uma olhada em alguns projetos de código aberto em GitHub.

Conclusão

O asterisco só deve ser usado se for absolutamente necessário (por exemplo, body * p para coincidir com parágrafos que têm um pai que não sejacorpo). Não apenas esse é o padrão não escrito (e menos provável de causar confusão), mas também diminui o tamanho do arquivo de folhas de estilo, o que aumenta a velocidade de carregamento do site.

Não sei se é bom ou ruim, mas tenho trabalhado com CSS como parte do desenvolvimento de aplicativos da Web há vários anos e Nunca visto alguém usar o caractere *.

Pessoalmente, costumo usar apenas o * ao aplicar uma regra a todas as tags. É redundante no caso de * .class {}, mas é útil no caso de .class * {}.

Eu li em alguns lugares, mas não verificado,que o seletor * pode afetar o desempenho. Não é algo que eu use a menos que eu precise, já que geralmente prefiro ser um pouco mais explícito, mas isso é apenas uma preferência pessoal.

Não é bom nem ruim, mas é (totalmente) redundante.

EDIT: Na verdade, me parece ruim, "porque é potencialmente confuso (como para os seres humanos, não analisadores).

De acordo com CSS especificação:

5.3 Seletor Universal

O seletor universal, escrito "*", corresponde ao nome de qualquer tipo de elemento. Ele corresponde a qualquer elemento único no árvore de documentos.

Se o seletor universal não for o apenas componente de um seletor simples, o "*" pode ser omitido. Por exemplo:

• *[lang=fr] e [lang=fr] são equivalentes.
• *.warning e .warning são equivalentes.
• *#myid e #myid são equivalentes.

Portanto, .TitleText e * .TitleText são equivalentes. É altamente improvável que qualquer implementação tenha uma consideração de desempenho para * .xxx, que não está lá para .xxx.

Isso se resume a uma questão de estilo. E como as considerações de estilo levantadas pelas outras respostas parecem ser em grande parte irrelevantes, acredito que continuarei explicando o *.

Eu não acho que isso importe, mas nenhum dos exemplos que eu vi quando eu estava aprendendo usaram o formato wild card, então eu aprendi a fazer sem o asterisco.

Além disso, nenhuma das ferramentas que geram CSS faz isso dessa forma, portanto, usando o asterisco, você corre o risco de uma ferramenta automatizada eliminar seu formato, se você optar por colocar seu CSS nessa ferramenta.

Apenas por coerência com a maioria dos outros desenvolvedores web, eu provavelmente recomendaria acabar com o asterisco para que você não tenha que lidar com outro desenvolvedor perguntando por que você colocou um asterisco lá.

Eu acho que o * é implícito, então eles fazem a mesma coisa.

Não tenho certeza, mas pode causar alguns problemas se você fizer assim:

span.style { color: red; }
*.style { color: blue; }

O estilo * provavelmente substituirá o estilo de extensão. Eu posso estar errado, já que span.style é um seletor mais específico.

Eu acho que é muito engraçado você fazer isso, mesmoEmbora eu entenda totalmente o porquê! Você está usando a sintaxe de prompt / shell do DOS com o seu CSS. No final você pode estar se confundindo pensando nisso dessa maneira, já que em um Shell você está olhando para a extensão do arquivo mas no CSS ele está mapeando classe.

Então, o que eu quero dizer é que funciona para seletores de classe, mas meio que cai para seletores de ID. Por exemplo:

span#id { ... }
*#id { ... }

... e não parece mais com a sintaxe da Shell. :) Pessoalmente eu não faria do jeito que você está fazendo, porque pode ser confuso, mas eu não acho que você está quebrando nada.

Isso seria redundante, assumindo * significa "cadacoisa possível no mundo "não ter um * também significaria o mesmo. Eu normalmente uso * {margin: 0; padding: 0} em undo.css para redefinir as margens e preenchimentos, mas nunca como um pseudo seletor.

Eu nunca vi ninguém usar o curinga comoisso, e eu suspeito que será escolhido em vez de apenas especificar a classe. Outras pessoas modificando os estilos talvez sejam forçadas a continuar usando essa sintaxe. Isto é, se eles descobrirem por que suas aulas não estão funcionando.

* .class sobrescreverá span.class mesmo que span.class seja mais importante.

Eu não vejo nenhum uso prático para *. Classe, substituições devem ser feitas com declaração importante e apenas escassa.

A única razão que eu uso * é remover todos os preenchimentos e margens, na verdade eu sempre faço isso é a primeira declaração css que eu escrevo sempre :).

Existem também alguns hacks css baseados em "* html" que não funcionam no IE6 e inferiores.

Eu sinalizo como má prática.

Em termos das especificações CSS, seus dois exemplos têm um significado idêntico. No entanto, existem problemas potenciais na prática. O maior, que eu posso ver, é que alguns navegadores podem maltratar * em termos de ponderação regra e assim potencialmente(embora eu não saiba de nenhum, fora do topo da minha cabeça, que faça isso - isso não me surpreenderia). Também é amplamente aceito, embora eu não possa citar o capítulo e o verso em você, os seletores de classe devem sempre incluir um nome de tag específico por motivos de desempenho. É aparentemente mais rápido aplicar um seletor de classe com um nome de tag (span.foo) do que sem e mais rápido para aplicar um seletor de ID sem um nome de tag (#bar) do que com.

EDIT: Isso está apontando que poderia muito bem haver um problema de desempenho. Algumas pessoas pareciam pensar que eu era algum tipo de saída ...

Enquanto eu não sei ao certo, eu gostaria de dar uma palavra de advertência! Considere o seguinte identificador:

div#foo a.bar {}

Eu ouço que jQuery por exemplo, que utilizacss, no exemplo acima, percorre o DOM procurando por divs primeiro, depois verifica se eles possuem um id de #foo, então, para uma tag A antes de finalmente ver se ela está classificada como .bar.

Minha preocupação com o * é que o navegador podepercorrer o DOM procurando por TODAS as tags e então procurar por .bar, ao invés de simplesmente procurar o atributo de "bar" - que são duas varreduras do DOM em vez de apenas uma. Pode ser uma diferença extremamente mínima, mas se sua sintaxe atinge as ondas de rádio, que são mais alguns painéis solares que precisamos instalar.