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

En CSS, *coincidirá con cualquier elemento.

Con frecuencia, *|*se usa en lugar de *hacer coincidir todos los elementos. Esto se usa generalmente con fines de prueba.

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

Según las especificaciones del selector W3C :

El selector universal permite un componente de espacio de nombres opcional. Se usa de la siguiente manera:

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

*|*
todos los elementos

|*
todos los elementos sin un espacio de nombres

*
si no se ha especificado un espacio de nombres predeterminado, esto es equivalente a * | *. De lo contrario, es equivalente a ns | * donde ns es el espacio de nombres predeterminado.

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

Puede ver visualmente las diferencias utilizando los dos fragmentos a continuación. 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 *|*aplica el borde a todos los 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>

En el siguiente fragmento de código sin nombre por defecto está definido y por lo tanto *y *|*se aplica a todos los elementos y así todos ellos obtener tanto el fondo de color beige y el borde negro. En otras palabras, funcionan de la misma manera cuando no se especifica un 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 señala BoltClock en los comentarios ( 1 , 2 ), inicialmente los espacios de nombres se aplican solo a lenguajes basados ​​en XML como XHTML, SVG, etc. pero según las últimas especificaciones, todos los elementos HTML (es decir, elementos en el espacio de nombres HTML) tienen espacios de nombres http://www.w3.org/1999/xhtml. Firefox sigue este comportamiento y es coherente en todos los agentes de usuario HTML5. Puedes encontrar más información en esta respuesta .

*|*representa el selector de "todos los elementos en cualquier espacio de nombres". De acuerdo con W3C , el selector se divide en:

ns | E

Donde ns es el espacio de nombres y E es el elemento. Por defecto, no se declaran espacios de nombres. Entonces, a menos que un espacio de nombres se declare explícitamente, *|*y *seleccionará los mismos elementos.

En CSS, * coincidirá con cualquier elemento.

El | se utiliza para hacer coincidir elementos específicos seleccionados . Ambos son selectores utilizados para nuestro propósito de prueba