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

211

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?

RockPaperLizard
quelle
1
Ähnliche Frage: Was *|*bedeutet in CSS?
Flimm

Antworten:

215

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 .

Harry
quelle
4
Gilt der Namespace nur für XHTML oder auch für HTML?
Flimm
8
@Flimm: Nur XML-basierte Sprachen wie XHTML und SVG. Beachten Sie jedoch, dass einige Browser wie Firefox (bei anderen nicht sicher) den XHTML-Namespace für CSS-Zwecke auch in Text / HTML anwenden. Siehe zum Beispiel jsfiddle.net/BoltClock/5ta6yvvc und für weitere Informationen diese Antwort .
BoltClock
3
Nachtrag - Das Verhalten von Firefox richtet sich nach den Spezifikationen und ist für alle HTML5-Benutzeragenten konsistent. Alle HTML-Elemente (dh Elemente im HTML-Namespace ) haben einen Namespace vonhttp://www.w3.org/1999/xhtml
BoltClock
44

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

Daniel Higueras
quelle
-3

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

KR Raja
quelle
2
Können Sie ein Beispiel geben?
Ben Leggiero