*|*表示“任何名称空间中的所有元素”的选择器。根据W3C，选择器分为:

ns|E

其中ns是命名空间，E是元素。默认情况下，不声明名称空间。因此，除非显式声明名称空间，否则*|*和*将选择相同的元素。

根据W3C选择器规范:

通用选择器允许使用可选的名称空间组件。它的用法如下: ns | * 命名空间ns中的所有元素 * | * 所有的元素 | * 没有名称空间的所有元素 ＊ 如果没有指定默认名称空间，这相当于*|*。否则，它等价于ns|*，其中ns是默认的命名空间。

因此，no *和*|*并不总是相同的。如果提供了默认名称空间，则*只选择属于该名称空间的元素。

You can visually see the differences using the below two snippets. In the first, a default namespace is defined and so the * selector applies the beige colored background only to the element which is part of that namsepace whereas the *|* applies the border to all elements. @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>

在下面的代码片段中，没有定义默认的名称空间，因此*和*|*都应用于所有元素，因此它们都具有米色背景和黑色边框。换句话说，当没有指定默认名称空间时，它们以相同的方式工作。

* { 背景:米色; ｝ * | * { 边框:1px实体; ｝ <a href="#">This is some link</a> < svg xmlns = " http://www.w3.org/2000/svg " > < xlink: href = " # " > <text x="20" y="20">This is some link</text> < / > < / svg >

正如BoltClock在注释(1,2)中指出的，最初名称空间仅应用于基于XML的语言，如XHTML、SVG等，但根据最新规范，所有HTML元素(即HTML名称空间中的元素)的名称空间均为http://www.w3.org/1999/xhtml。Firefox遵循这种行为，并且在所有HTML5用户代理中是一致的。你可以在这个答案中找到更多信息。

在CSS中，*将匹配任何元素。

|用于匹配选定的特定元素。两者都是用于我们测试目的的选择器