CSS中*和* | *之间的区别是什么？ [英] What is the difference between * and *|* in CSS?

问题描述

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

In CSS, * will match any element.

通常， * | * 用于代替 * 以匹配所有元素。

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

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

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

| *

没有命名空间的所有元素

|*
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.

code>和 * | * 不总是相同。如果提供了默认名称空间，则 * 只选择作为该命名空间一部分的元素。

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.

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

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>

snippet没有定义默认命名空间，因此 * 和 * | * 适用于所有元素，因此所有元素米黄背景和黑色边界。换句话说，当没有指定默认命名空间时，它们的工作方式相同。

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 < a>），最初命名空间仅应用于基于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中*和* | *之间的区别是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！