CSS中和|*有什么区别？

Question

CSS中和|*有什么区别？

csscss-selectorsnamespaces

214

CSS中，*会匹配任何元素。

通常情况下，*|*会被用来代替*来匹配所有元素。这种情况一般用于测试目的。

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

- RockPaperLz- Mask it or Casket

1

类似问题：CSS 中 *|* 的含义是什么？ - Flimm

3个回答

44

*|*代表“任何命名空间中的所有元素”的选择器。根据W3C的规定，该选择器被分为：

ns | E

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

- Daniel Higueras

-4

在CSS中，*将匹配任何元素。 |用于匹配选择特定的元素。这两个选择器都是用于我们的测试目的。

- KR Raja

3

可以举个例子吗？ - Ky -

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

根据W3C Selector Spec：

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

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

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>

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

* {
  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中找到更多信息。

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

CSS中和|*有什么区别？