Jaka jest różnica między * i * | * w CSS?

Question

W CSS, * dopasuje dowolny element.

Często stosuje się *|* zamiast *, aby dopasować wszystkie elementy. Jest to zwykle używane do celów testowych.

Jaka jest różnica między * i *|* w CSS?

Answer 1

Zgodnie W3C Selector Spec:

Uniwersalny selektor pozwala opcjonalnego komponentu przestrzeni nazw. Stosuje się go w następujący sposób:

ns|*
wszystkie elementy, w NS przestrzeni nazw

*|*
wszystkie elementy

|*
Wszystkie elementy bez nazw

*
jeśli nie domyślnej przestrzeni nazw został określony, to jest równoważne * | *. W przeciwnym razie jest to równoważne ns | *, gdzie ns jest domyślną przestrzenią nazw.

Tak więc, nie * i *|* nie zawsze są takie same. Jeśli podano domyślną przestrzeń nazw, wówczas * wybiera tylko te elementy, które są częścią tej przestrzeni nazw.

---

Możesz zobaczyć różnice za pomocą poniższych dwóch fragmentów. W pierwszym zdefiniowany jest domyślny obszar nazw, dlatego selektor * stosuje beżowe kolorowe tło tylko do elementu, który jest częścią tej nazwy, podczas gdy *|* stosuje obramowanie do wszystkich elementów.

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

w poniższej snippet nie jest zdefiniowana domyślna przestrzeń nazw i tak zarówno * i *|* dotyczy wszystkich elementów i tak wszyscy się zarówno beżowe tło i czarne obramowanie. Innymi słowy, działają one tak samo, gdy nie jest określona domyślna przestrzeń nazw.

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

---

Jak BoltClock podkreśla w komentarzach (1, 2), początkowo Przestrzenie nazw stosowanych wyłącznie do języków XML oparte takich jak XHTML, SVG etc ale według najnowszych specyfikacji, wszystkie HTML elementy (to jest elementy w przestrzeni nazw HTML) są pseudonimami pod numer http://www.w3.org/1999/xhtml. Firefox śledzi to zachowanie i jest spójny we wszystkich programach użytkownika HTML5. Więcej informacji można znaleźć w this answer.

Answer 2

*|* reprezentuje selektor "wszystkich elementów w dowolnym obszarze nazw". Według to W3C selektor dzieli się na:

ns | E

Gdzie ns jest namespace i E jest elementem. Domyślnie zadeklarowane są żadne przestrzenie nazw. Więc jeśli przestrzeń nazw nie zostanie jawnie zadeklarowana, *|* i * wybierze te same elementy.

Answer 3

W CSS, * zostanie dopasowany dowolny element.

| służy do dopasowania wybranych elementów określonych elementów. Oba są selektorem używanym do naszego celu testowania.