Qual é a diferença entre * e * | * em CSS?

Em CSS, *corresponderá a qualquer elemento.

Freqüentemente, *|*é usado em vez de *corresponder a todos os elementos. Isso geralmente é usado para fins de teste.

Qual é a diferença entre *e *|*no CSS?

Conforme as especificações do seletor W3C :

O seletor universal permite um componente opcional de espaço para nome. É usado da seguinte maneira:

ns|*
todos os elementos no namespace ns

*|*
todos os elementos

|*
todos os elementos sem um espaço para nome

*
se nenhum espaço de nomes padrão foi especificado, isso é equivalente a * | *. Caso contrário, é equivalente a ns | * onde ns é o espaço para nome padrão.

Então, não *e *|*nem sempre são os mesmos. Se um espaço de nome padrão for fornecido, *selecione apenas os elementos que fazem parte desse espaço de nome.

Você pode ver visualmente as diferenças usando os dois trechos abaixo. No primeiro, um espaço para nome padrão é definido e, portanto, o *seletor aplica o plano de fundo bege somente ao elemento que faz parte desse espaço para nome, enquanto o *|*aplica a borda a todos os elementos.

@namespace "http://www.w3.org/2000/svg";

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

No abaixo trecho sem namespace padrão é definido e assim ambos *e *|*se aplica a todos os elementos e assim todos eles obter tanto o fundo bege ea borda preta. Em outras palavras, eles funcionam da mesma maneira quando nenhum espaço para nome padrão é especificado.

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

Como aponta BoltClock nos comentários ( 1 , 2 ), inicialmente namespaces aplicada apenas a linguagens baseadas em XML, como XHTML, SVG etc, mas de acordo com as especificações mais recentes, todos os elementos HTML (isto é, elementos no namespace HTML) são namespaced para http://www.w3.org/1999/xhtml. O Firefox segue esse comportamento e é consistente em todos os agentes de usuário HTML5. Você pode encontrar mais informações nesta resposta .

*|*representa o seletor de "todos os elementos em qualquer espaço para nome". De acordo com o W3C , o seletor é dividido em:

ns | E

Onde ns é o espaço para nome e E é o elemento. Por padrão, nenhum espaço para nome é declarado. Portanto, a menos que um espaço para nome seja declarado explicitamente *|*e *selecione os mesmos elementos.

Em CSS, * corresponderá a qualquer elemento.

| é usado para corresponder a selecionar elementos específicos . Ambos são seletores usados ​​para nosso propósito de teste