nuevos - selector padre css
¿Cuál es la diferencia entre*y*|*en CSS? (3)
En CSS,
*
coincidirá con cualquier elemento.
Con frecuencia, se utiliza
*|*
lugar de
*
para hacer coincidir todos los elementos.
Esto se usa generalmente con fines de prueba.
¿Cuál es la diferencia entre
*
y
*|*
en CSS?
En CSS, * coincidirá con cualquier elemento.
El | se usa para hacer coincidir elementos específicos seleccionados. Ambos son selectores utilizados para nuestro propósito de prueba
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 son siempre iguales.
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 namsepace 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 fragmento a continuación, no se define ningún espacio de nombres predeterminado, por lo que tanto
*
como
*|*
aplican a todos los elementos, por lo que todos obtienen el fondo 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 los lenguajes basados en XML como XHTML, SVG, etc.
http://www.w3.org/1999/xhtml
.
Firefox sigue este comportamiento y es consistente 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".
Según
W3C
, el selector se divide en:
ns | E
Donde ns es el
namespace
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án los mismos elementos.