O que o seletor * * CSS faz?

97

Recentemente me deparei * *com CSS .

Referência do site - Link do site .

Para um único *uso na folha de estilo CSS, Internet e Stack Overflow são inundados com exemplos, mas não tenho certeza sobre o uso de dois * *símbolos em CSS.

Pesquisei no Google, mas não consegui encontrar nenhuma informação relevante sobre isso, pois um único *seleciona todos os elementos, mas não tenho certeza por que o site usou duas vezes. Qual é a parte que falta para isso e por que este hack é usado (se for um hack)?

html css css-selectors

— swapnesh
fonte

138

Assim como qualquer outra vez que você colocar dois seletores um após o outro (por exemplo li a), você obterá o combinador descendente. O mesmo * *ocorre com qualquer elemento descendente de qualquer outro elemento - em outras palavras, qualquer elemento que não seja o elemento raiz de todo o documento.

— hobbs
fonte

obrigado pela resposta ... isso é o que eu estava pensando, mas não tenho certeza, então pensei em perguntar da comunidade ... aceitarei em breve +1

— swapnesh

1

Só mais uma pergunta - é realmente relevante usar * *? como se eu entendesse o conceito, mas não em termos práticos :(

— swapnesh

2

@swapnesh parece um hack do navegador. Existe uma * { font-size: XXX }regra e uma * * { font-size: YYY }regra. Um deles se aplica à maioria dos navegadores e o outro se aplica a navegadores com um determinado bug, embora eu não tenha paciência para descobrir os detalhes. É semelhante ao * htmlhack que costumava ser usado para detectar o IE antigo.

— hobbs,

obrigado por adicionar o último bloco detalhado nos comentários ... é quase perfeito ... não há necessidade de fazer mais brainstorming para isso :) muito

— obrigado

10

Note-se que na forma de * html, * * vai coincidir com o elemento html no IE6.

— Alohci,

80

Apenas um pequeno grande exemplo:

Tente adicionar isso em seu site:

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

Demo: http://jsfiddle.net/l2aelba/sFSad/

Exemplo 2:

Demo: http://jsfiddle.net/l2aelba/sFSad/34/

— l2aelba
fonte

7

Esta não é exatamente a resposta, mas que bela visualização!

— aboy021

1

@ l2aelba realmente uma bela explicação :) +1

— swapnesh

33

* *Corresponde a tudo, exceto o elemento de nível superior, por exemplo html,.

— Frambot
fonte

Obrigado Joe, testei aqui e também de acordo com os comentários acima: o * *seletor é equivalente a html *para todos os navegadores exceto o bom e velho IE6 :-)

— Stano

@Stano * *é equivalente a html *... para um arquivo HTML. Mas CSS pode ser usado para estilizar outros tipos de documentos (principalmente SVG).

— Sylvain Leroux

11

* significa aplicar determinados estilos a todos os elementos.

* *significa aplicar os estilos fornecidos a todos os elementos filho do elemento. Exemplo:

body > * {
  margin: 0;
}

Isso aplica estilos de margem a todos os elementos filho do corpo. Da mesma forma,

* * {
  margin: 0;
}

aplica margin: 0- se aos *elementos filhos de. Resumindo, isso se aplica margin: 0a quase todos os elementos.

Geralmente, um *é o suficiente. Não há necessidade de dois * *.

— CrazyFellow
fonte

2

obrigado pela explicação +1 .. embora eu não tenha certeza do que você acabou de mencionar na última linha "Geralmente, * é o suficiente. Não há necessidade de * *. Eu acho."

— swapnesh de

3

* *aplica estilos a elementos descendentes , não a elementos filhos. Os elementos filhos seriam >como em seu exemplo, não o espaço. Descendente e filho não são a mesma coisa.

— BoltClock

7

Isso seleciona todos os elementos aninhados dentro de outro elemento da mesma maneira div aque selecionaria todos os <a>elementos aninhados em algum lugar dentro de um <div>elemento.

— Mike Brant
fonte