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

Question

In CSS entspricht * einem beliebigen Element.

Häufig wird *|* anstelle von * verwendet, um alle Elemente zu vergleichen. Dies wird normalerweise zu Testzwecken verwendet.

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

Answer 1

Per W3C Selector Spec:

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

ns|*
alle Elemente im Namensraum ns

*|*
alle Elemente

|*
alle Elemente ohne Namensraum

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

Also, * und *|* sind nicht immer gleich. Wenn ein Standardnamenbereich angegeben wird, wählt * nur Elemente aus, die Teil dieses Namespace sind.

---

Sie können die Unterschiede visuell mit den folgenden zwei Schnipsel sehen. In der ersten wird ein Standard-Namespace definiert und der * Selektor wendet den beigefarbenen Hintergrund nur auf das Element an, das Teil dieses Namensraums ist, während *|* den Rahmen auf alle Elemente anwendet.

@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 Code-Schnipsel kein Standard-Namespace definiert ist und beide so * und *|* gilt für alle Elemente und so alle von ihnen sowohl den beige Hintergrund bekommen und den schwarzen Rand. Mit anderen Worten, sie funktionieren genauso, wenn kein Standardnamespace angegeben wird.

* { 
 
    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 den Kommentaren weist darauf hin (1, 2), Namensräume XML-basierte Sprachen wie XHTML nur anfänglich angewendet, SVG usw., aber nach neuesten Spezifikationen, die alle HTML Elemente (dh Elemente im HTML-Namespace) haben einen Namespace von http://www.w3.org/1999/xhtml. Firefox folgt diesem Verhalten und ist in allen HTML5-Benutzeragenten konsistent. Weitere Informationen finden Sie unter this answer.

Answer 2

*|* repräsentiert den Selektor von "alle Elemente in einem beliebigen Namespace". Nach to W3C wird der Wähler unterteilt in:

ns | E

Wo ns die namespace und E ist das Element. Standardmäßig sind keine Namespaces deklariert. Wenn also kein Namespace explizit deklariert wird, werden *|* und * dieselben Elemente auswählen.

Answer 3

In CSS, * wird jedes Element übereinstimmen.

| wird verwendet, um ausgewählte spezifische Elemente zu entsprechen. Beide sind Selektor für unseren Testzweck verwendet