CSSの*と* | *の違いは何ですか？

CSSでは、*すべての要素に一致します。

多くの場合、すべての要素を照合する*|*代わりにが使用され*ます。これは通常、テスト目的で使用されます。

違いは何である*と*|*CSSでは？

W3Cセレクター仕様に従って：

ユニバーサルセレクターでは、オプションの名前空間コンポーネントを使用できます。次のように使用されます。

ns|*
名前空間nsのすべての要素

*|*
すべての要素

|*
名前空間のないすべての要素

*
デフォルトの名前空間が指定されていない場合、これは* | *と同等です。それ以外の場合は、ns | *と同等です。nsはデフォルトの名前空間です。

したがって、いいえ*、*|*常に同じとは限りません。デフォルトの名前空間が提供され*ている場合は、その名前空間の一部である要素のみを選択します。

以下の2つのスニペットを使用して、違いを視覚的に確認できます。最初の例では、デフォルトの名前空間が定義されているため、*セレクターはそのnamsepaceの一部である要素にのみベージュ色の背景を*|*適用し、境界線はすべての要素に適用します。

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

以下ではデフォルトの名前空間が定義されていないので、両方されるスニペット*と*|*すべての要素に適用されますので、それらすべてのベージュの背景と黒の境界線の両方を取得します。つまり、デフォルトの名前空間が指定されていない場合も同じように機能します。

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

BoltClockコメント（で指摘しているように1、2）、最初に名前空間が（、HTML名前空間の要素である）XMLベースなSVGなどXHTML、としてではなく、最新のスペックどおりの言語、すべてのHTML要素にのみ適用する名前空間されていますhttp://www.w3.org/1999/xhtml。Firefoxはこの動作に従い、すべてのHTML5ユーザーエージェントで一貫しています。あなたはこの答えでより多くの情報を見つけることができます。

*|*「任意の名前空間のすべての要素」のセレクターを表します。W3Cによると、セレクターは次のように分かれています。

ns | E

ここで、nsは名前空間、Eは要素です。デフォルトでは、名前空間は宣言されていません。そうしない限り、名前空間を明示的に宣言され、*|*かつ*同じ要素を選択します。

CSSでは、*はすべての要素に一致します。

| 特定の要素を選択して一致させるために使用されます。どちらも、テスト目的で使用されるセレクターです