Qual è la differenza tra * e * | * nei CSS?

In CSS, *corrisponderà a qualsiasi elemento.

Spesso, *|*viene utilizzato anziché *per abbinare tutti gli elementi. Questo è generalmente usato a scopo di test.

Qual è la differenza tra *e *|*in CSS?

Secondo le specifiche del selettore W3C :

Il selettore universale consente un componente dello spazio dei nomi opzionale. È usato come segue:

ns|*
tutti gli elementi nello spazio dei nomi ns

*|*
tutti gli elementi

|*
tutti gli elementi senza uno spazio dei nomi

*
se non è stato specificato alcun namespace predefinito, questo equivale a * | *. Altrimenti è equivalente a ns | * dove ns è lo spazio dei nomi predefinito.

Quindi no *e *|*non sono sempre gli stessi. Se viene fornito uno spazio dei nomi predefinito, *seleziona solo gli elementi che fanno parte di quello spazio dei nomi.

Puoi vedere visivamente le differenze usando i due seguenti frammenti. Nel primo, viene definito uno spazio dei nomi predefinito e quindi il *selettore applica lo sfondo colorato di beige solo all'elemento che fa parte di quel namsepace mentre *|*applica il bordo a tutti gli elementi.

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

Nello snippet di seguito non viene definito uno spazio dei nomi predefinito e quindi entrambi *e si *|*applica a tutti gli elementi e quindi tutti ottengono sia lo sfondo beige che il bordo nero. In altre parole, funzionano allo stesso modo quando non viene specificato uno spazio dei nomi predefinito.

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

Come BoltClock sottolinea nei commenti ( 1 , 2 ), inizialmente gli spazi dei nomi si applicano solo ai linguaggi basati su XML come XHTML, SVG ecc http://www.w3.org/1999/xhtml. Firefox segue questo comportamento ed è coerente con tutti gli user agent HTML5. Puoi trovare maggiori informazioni in questa risposta .

*|*rappresenta il selettore di "tutti gli elementi in qualsiasi spazio dei nomi". Secondo il W3C , il selettore è diviso in:

ns | E

Dove ns è lo spazio dei nomi ed E è l'elemento. Per impostazione predefinita, non vengono dichiarati spazi dei nomi. Quindi, a meno che uno spazio dei nomi non sia dichiarato esplicitamente *|*e *selezionerà gli stessi elementi.

In CSS, * corrisponderà a qualsiasi elemento.

| viene utilizzato per abbinare selezionare elementi specifici . Entrambi sono selettori utilizzati per il nostro scopo di test