*和* | *在CSS中有什么区别？

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

通常*|*用于代替*匹配所有元素。通常用于测试目的。

*和*|*CSS 和有什么不一样？

根据W3C选择器规范：

通用选择器允许一个可选的名称空间组件。它的用法如下：

ns|*
ns名称空间中的所有元素

*|*
所有要素

|*
所有没有命名空间的元素

*
如果未指定默认名称空间，则等效于* | *。否则，它等效于ns | *，其中ns是默认名称空间。

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

您可以使用以下两个代码片段直观地看到差异。首先，定义一个默认的名称空间，因此*选择器仅将米色背景应用于该命名空间的一部分，而*|*将边框应用于所有元素。

@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语言，比如XHTML，SVG等，但按照最新的规格，所有的HTML元素（也就是在HTML命名空间的元素）的命名空间来http://www.w3.org/1999/xhtml。Firefox遵循此行为，并且在所有HTML5用户代理中均保持一致。您可以在此答案中找到更多信息。

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

ns | E

其中ns是名称空间，E是元素。默认情况下，不声明任何名称空间。所以，除非一个命名空间显式声明，*|*并*会选择相同的元素。

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

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