CSS 中的 * 和 *|* 有啥区别？

Posted 2023-02-23

【中文标题】CSS 中的 * 和 *|* 有啥区别？

【英文标题】：What is the difference between * and *|* in CSS?CSS 中的 * 和 *|* 有什么区别？

【发布时间】：2016-05-01 10:53:15

【问题描述】：

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

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

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

【问题讨论】：

类似问题：What does *|* mean in CSS?

【参考方案1】：

根据W3C Selector Spec：

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

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

*|* 所有元素

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

* 如果没有指定默认命名空间，这相当于 *|*。否则，它等效于 ns|*，其中 ns 是默认命名空间。

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

---

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

@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>

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

* 
  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 在 cmets (1,2) 中指出的那样，最初命名空间仅适用于基于 XML 的语言，例如 Xhtml、SVG 等，但根据最新规范，所有 HTML 元素（即 HTML 中的元素命名空间）被命名为http://www.w3.org/1999/xhtml。 Firefox 遵循这种行为，并且在所有 HTML5 用户代理中都是一致的。您可以在this answer找到更多信息。

【讨论】：

命名空间仅适用于 XHTML 还是也适用于 HTML？

@Flimm：仅基于 XML 的语言，例如 XHTML 和 SVG。但请注意，某些浏览器，例如 Firefox（不确定其他浏览器），甚至在 text/html 中应用 XHTML 命名空间，以实现 CSS 的目的。例如，请参阅 jsfiddle.net/BoltClock/5ta6yvvc，了解更多信息 this answer。

附录 - Firefox 的行为符合规范，并且在所有 HTML5 用户代理中都是一致的。所有 HTML 元素（即 HTML 命名空间 中的元素）都被命名为 http://www.w3.org/1999/xhtml

【参考方案2】：

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

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

【讨论】：

你能举个例子吗？

【参考方案3】：

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

ns|E

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