Was ist der Unterschied zwischen * und * | * in CSS?

Stimmt in CSS *mit jedem Element überein.

Wird häufig *|*verwendet, anstatt *alle Elemente abzugleichen. Dies wird im Allgemeinen zu Testzwecken verwendet.

Was ist der Unterschied zwischen *und *|*in CSS?

Gemäß W3C-Auswahlspezifikation :

Der universelle Selektor ermöglicht eine optionale Namespace-Komponente. Es wird wie folgt verwendet:

ns|*
alle Elemente im Namespace ns

*|*
alle Elemente

|*
Alle Elemente ohne Namespace

*
Wenn kein Standard-Namespace angegeben wurde, entspricht dies * | *. Andernfalls entspricht es ns | *, wobei ns der Standardnamespace ist.

Also nein *und *|*sind nicht immer gleich. Wenn ein Standard-Namensraum bereitgestellt *wird, werden nur Elemente ausgewählt, die Teil dieses Namespace sind.

Sie können die Unterschiede anhand der folgenden beiden Ausschnitte visuell erkennen. Im ersten wird ein Standard-Namespace definiert, und der *Selektor wendet den beigefarbenen Hintergrund nur auf das Element an, das Teil dieses Namespace ist, während *|*der Rand auf alle Elemente angewendet wird .

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

Im folgenden Snippet ist kein Standard-Namespace definiert und somit beides *und *|*gilt für alle Elemente, sodass alle sowohl den beigen Hintergrund als auch den schwarzen Rand erhalten. Mit anderen Worten, sie funktionieren genauso, wenn kein Standard-Namespace angegeben ist.

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

Wie BoltClock in Kommentaren hervorhebt ( 1 , 2 ) , werden Namespaces zunächst nur auf XML-basierte Sprachen wie XHTML, SVG usw. angewendet. neuesten Spezifikationen werden jedoch alle HTML-Elemente (dh Elemente im HTML-Namespace) mit Namespaces versehen http://www.w3.org/1999/xhtml. Firefox folgt diesem Verhalten und ist für alle HTML5-Benutzeragenten konsistent. Weitere Informationen finden Sie in dieser Antwort .

*|*repräsentiert den Selektor von "allen Elementen in einem beliebigen Namespace". Laut W3C ist der Selektor unterteilt in:

ns | E.

Dabei ist ns der Namespace und E das Element. Standardmäßig werden keine Namespaces deklariert. Es sei denn, ein Namespace wird explizit deklariert *|*und *wählt dieselben Elemente aus.

In CSS stimmt * mit jedem Element überein.

| wird verwendet, um ausgewählte bestimmte Elemente abzugleichen . Beide sind Selektoren, die für unsere Testzwecke verwendet werden