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

Question

在CSS中,*将匹配任何元素.

经常*|*使用而不是*匹配所有元素.这通常用于测试目的.

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

Answer 1

根据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用户代理中都是一致的.您可以在此答案中找到更多信息.

Answer 2

*|*表示"任何命名空间中的所有元素"的选择器.根据W3C,选择器分为:

NS |企业

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