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

W CSS *dopasuje dowolny element.

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

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

Zgodnie ze specyfikacją W3C Selector :

Uniwersalny selektor umożliwia opcjonalny komponent przestrzeni nazw. Używa się go w następujący sposób:

ns|*
wszystkie elementy w przestrzeni nazw ns

*|*
wszystkie elementy

|*
wszystkie elementy bez przestrzeni nazw

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

Więc nie *i *|*nie zawsze są takie same. Jeśli zapewniona jest domyślna przestrzeń nazw, wówczas *wybiera tylko elementy, które są częścią tej przestrzeni nazw.

Różnice możesz wizualnie zobaczyć za pomocą dwóch poniższych fragmentów. W pierwszym zdefiniowana jest domyślna przestrzeń nazw, więc *selektor stosuje beżowe tło tylko do elementu, który jest częścią tego namsepace, podczas gdy *|*stosuje granicę 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żej urywek nie jest zdefiniowana domyślna przestrzeń nazw i tak obaj *i *|*odnosi się do 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 określono domyślnej przestrzeni 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 wskazuje w komentarzach ( 1 , 2 ), początkowo przestrzenie nazw stosowane były tylko dla języków opartych na XML, takich jak XHTML, SVG itp., Ale zgodnie z najnowszą specyfikacją wszystkie elementy HTML (czyli elementy w przestrzeni nazw HTML) są rozmieszczane w przestrzeni nazw http://www.w3.org/1999/xhtml. Firefox stosuje to zachowanie i jest spójny we wszystkich aplikacjach klienckich HTML5. Więcej informacji można znaleźć w tej odpowiedzi .

*|*reprezentuje selektor „wszystkich elementów w dowolnej przestrzeni nazw”. Według W3C selektor jest podzielony na:

ns | E

Gdzie ns to przestrzeń nazw, a E to element. Domyślnie przestrzenie nazw nie są deklarowane. Więc jeśli przestrzeń nazw nie zostanie jawnie zadeklarowana *|*i *wybierze te same elementy.

W CSS * pasuje do dowolnego elementu.

| służy do dopasowania wybranych określonych elementów . Oba są selektorem używanym do naszych celów testowych