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

Question

CSSでは、*はどの要素にも一致します。

*の代わりに*|*が頻繁に使用され、すべての要素が一致します。これは一般的にテスト目的で使用されます。

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

Answer 1

1として：ユニバーサルセレクタはオプションの名前空間コンポーネントを可能

。これは次のように使用されます。

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>

にはデフォルトの名前空間が定義されていないスニペットので、両方 *と *|*すべての要素に適用されますので、それらすべてのベージュの背景と黒の境界線の両方を取得します。言い換えれば、デフォルトの名前空間が指定されていないときと同じ方法で動作します。BoltClockコメント（ 1、 2）、当初はそのようなどXHTML、SVGなどのXMLベースの言語に適用される名前空間の指摘するように

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

---

が、最新のスペックどおり、すべてのHTML要素（つまり、HTML名前空間の要素）は、名前空間がhttp://www.w3.org/1999/xhtmlになります。 Firefoxはこの動作に従い、すべてのHTML5ユーザエージェントで一貫性があります。詳細はthis answerにあります。

Answer 2

*|*は、「任意の名前空間のすべての要素」のセレクタを表します。 | E NSがnamespaceであり、Eが元素である

NS：to W3Cによれば、セレクタは分割されます。デフォルトでは、名前空間は宣言されていません。したがって、名前空間が明示的に宣言されない限り、*|*と*は同じ要素を選択します。

W3C Selector Spec

Answer 3

CSSでは、*はどの要素にも一致します。

|は、の特定の要素に一致するために使用されます。どちらも私たちのテスト目的のために使用されるセレクタです