[解決済み】CSSの*と*|*の違いは何ですか？

質問

CSSでは * は任意の要素にマッチします。

よくあること *|* の代わりに使用されます。 * を使うと、すべての要素にマッチします。これは、一般にテスト目的で使用されます。

との違いは何ですか？ * と *|* をCSSで表示できますか？

どのように解決するのですか？

の通りです。 W3Cセレクタ仕様 :

ユニバーサルセレクタでは、オプションで名前空間コンポーネントを指定することができます。以下のように使用します。

ns|*

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

*|*

すべての要素

|*

名前空間を持たないすべての要素

*

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

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

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

@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 のようなXMLベースの言語にのみ適用されていましたが、最新の仕様では、すべてのHTML要素（つまり、HTML名前空間の要素）は、名前空間が http://www.w3.org/1999/xhtml . Firefox はこの動作に従っており、すべての HTML5 ユーザーエージェントで一貫しています。詳細な情報は この回答 .