Question

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

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

CSS中*和*|*之间的区别是什么？

Answer 1

通用选择器允许使用可选的命名空间组件。它使用如下：

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用户代理中都是一致的。您可以在this answer中找到更多信息。

Answer 2

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

<强> NS |电子

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

Answer 3

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

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

CSS中和 | *有什么区别？

3 个答案:

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

3 个答案:

CSS中和 | *有什么区别？