CSS 中的 * 和 *|* 有什么区别?

问题描述

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

In CSS, * will match any element.

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

Frequently, *|* is used instead of * to match all elements. This is generally used for testing purposes.

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

What is the difference between * and *|* in CSS?

推荐答案

根据 W3C选择器规范:

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

The universal selector allows an optional namespace component. It is used as follows:

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

ns|*
all elements in namespace ns

*|*
所有元素

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

|*
all elements without a namespace

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

*
if no default namespace has been specified, this is equivalent to *|*. Otherwise it is equivalent to ns|* where ns is the default namespace.

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

So, no * and *|* are not always the same. If a default name space is provided then * selects only elements that are part of that namespace.

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

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>

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

In the below snippet no default namespace is defined and so both * and *|* applies to all elements and so all of them get both the beige background and the black border. In other words, they work the same way when no default namespace is specified.

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

As BoltClock points out in comments (1,2), initially namespaces applied only to XML based languages such as XHTML, SVG etc but as per latest specs, all HTML elements (that is, elements in the HTML namespace) are namespaced to http://www.w3.org/1999/xhtml. Firefox follows this behavior and it is consistent across all HTML5 user agents. You can find more information in this answer.

这篇关于CSS 中的 * 和 *|* 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！