Quelle est la différence entre * et * | * en CSS?

En CSS, *correspondra à n'importe quel élément.

Fréquemment, *|*est utilisé au lieu de *faire correspondre tous les éléments. Ceci est généralement utilisé à des fins de test.

Quelle est la différence entre *et *|*en CSS?

Selon les spécifications du sélecteur W3C :

Le sélecteur universel permet un composant d'espace de noms facultatif. Il est utilisé comme suit:

ns|*
tous les éléments de l'espace de noms ns

*|*
tous les éléments

|*
tous les éléments sans espace de noms

*
si aucun espace de noms par défaut n'a été spécifié, cela équivaut à * | *. Sinon, il équivaut à ns | * où ns est l'espace de noms par défaut.

Donc, non *et *|*ne sont pas toujours les mêmes. Si un espace de noms par défaut est fourni, il *sélectionne uniquement les éléments qui font partie de cet espace de noms.

Vous pouvez voir visuellement les différences à l'aide des deux extraits ci-dessous. Dans le premier, un espace de noms par défaut est défini et le *sélecteur applique donc l'arrière-plan de couleur beige uniquement à l'élément qui fait partie de cet espace de noms tandis que l' *|*applique la bordure à tous les éléments.

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

Dans l'extrait ci - dessous aucun espace de noms par défaut est définie et donc à la fois *et *|*applique à tous les éléments et ainsi tous les obtenir à la fois le fond beige et la bordure noire. En d'autres termes, ils fonctionnent de la même manière quand aucun espace de noms par défaut n'est spécifié.

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

Comme BoltClock souligne dans les commentaires ( 1 , 2 ), initialement namespaces appliquée uniquement aux langues à base de XML tels que XHTML, SVG , etc , mais selon les dernières spécifications, tous les éléments HTML (qui est, des éléments dans l'espace de noms HTML) sont espaces de noms à http://www.w3.org/1999/xhtml. Firefox suit ce comportement et il est cohérent dans tous les agents utilisateurs HTML5. Vous pouvez trouver plus d'informations dans cette réponse .

*|*représente le sélecteur de "tous les éléments dans n'importe quel espace de noms". Selon le W3C , le sélecteur est divisé en:

ns | E

Où ns est l' espace de noms et E est l'élément. Par défaut, aucun espace de noms n'est déclaré. Donc, sauf si un espace de noms est déclaré explicitement, *|*et *sélectionnera les mêmes éléments.

En CSS, * correspondra à n'importe quel élément.

| est utilisé pour faire correspondre certains éléments spécifiques . Les deux sont des sélecteurs utilisés pour notre test