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


Respuestas:


216

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 .


44
¿Los espacios de nombres se aplican solo a XHTML o HTML también?
Flimm

8
@Flimm: solo lenguajes basados ​​en XML, como XHTML y SVG. Pero tenga en cuenta que algunos navegadores, como Firefox (no estoy seguro acerca de otros), aplican el espacio de nombres XHTML incluso en texto / html, para fines de CSS. Ver por ejemplo jsfiddle.net/BoltClock/5ta6yvvc , y para más información esta respuesta .
BoltClock

3
Anexo: el comportamiento de Firefox es por especificaciones y es coherente en todos los agentes de usuario HTML5. Todos los elementos HTML (es decir, elementos en el espacio de nombres HTML ) tienen un espacio de nombres enhttp://www.w3.org/1999/xhtml
BoltClock

44

*|*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.


-3

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


2
¿Puede dar un ejemplo?
Ben Leggiero
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.