¿Cuál es la diferencia entre * y *|* en CSS?

Según W3C Selector Spec :

El selector universal permite un componente opcional de espacio de nombres. Se utiliza como sigue:

ns|*
todos los elementos en el espacio de nombres ns

*|*
todos los elementos

|*
todos los elementos sin espacio de nombres

*
si no se ha especificado ningún espacio de nombres predeterminado, esto equivale a *|*. De lo contrario, es equivalente a ns/ * donde ns es el valor predeterminado espacio de nombres.

Entonces, no * y *|* no son siempre lo mismo. Si se proporciona un espacio de nombres predeterminado, * selecciona solo los elementos que forman parte de ese espacio de nombres.

Puede ver visualmente las diferencias utilizando los dos fragmentos de código siguientes. En el primero, se define un espacio de nombres predeterminado y, por lo tanto, el selector * aplica el fondo de color beige solo al elemento que forma parte de ese espacio de nombres, mientras que el *|* aplica el borde a todos elemento.

@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>

En el siguiente fragmento de código no se define ningún espacio de nombres predeterminado, por lo que tanto * como *|* se aplican a todos los elementos y todos obtienen el fondo beige y el borde negro. En otras palabras, funcionan de la misma manera cuando no se especifica ningún espacio de nombres predeterminado.

* {
  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 BoltClock señala en los comentarios (1,2), inicialmente, los espacios de nombres se aplicaban solo a lenguajes basados en XML como XHTML, SVG etc pero según las especificaciones más recientes, todos los elementos HTML (es decir, los elementos en el espacio de nombres HTML) tienen un espacio de nombres http://www.w3.org/1999/xhtml. Firefox sigue este comportamiento y es consistente en todos los agentes de usuario HTML5. Puede encontrar más información en esta respuesta .