命名空间分隔符

**命名空间分隔符**（|）将选择器与命名空间分隔开来，标识类型选择器的命名空间或其不存在。

css
/* Links in the namespace named myNameSpace */
myNameSpace|a {
  font-weight: bold;
}
/* paragraphs in any namespace (including no namespace) */
*|p {
  color: darkblue;
}
/* heading level 2 not in a namespace */
|h2 {
  margin-bottom: 0;
}

类型选择器和通用选择器允许使用可选的命名空间组件。当命名空间之前已通过@namespace声明时，可以通过在选择器前面添加命名空间名称并用命名空间分隔符（|）分隔来为这些选择器命名空间。这在处理包含多个命名空间的文档时非常有用，例如包含内联 SVG 或 MathML 的 HTML，或混合了多个词汇表的 XML。

  • ns|h1 - 匹配命名空间 ns 中的 <h1> 元素
  • *|h1 - 匹配所有 <h1> 元素
  • |h1 - 匹配任何已声明或隐式命名空间之外的所有 <h1> 元素

语法

css
namespace|element { style properties }

示例

默认情况下，HTML 或 SVG 元素中的所有元素都具有命名空间，因为 http://www.w3.org/1999/xhtml 和 http://www.w3.org/2000/svg 命名空间是隐式的。 document.createElementNS 方法（对于命名空间参数使用空字符串）可以用于创建没有命名空间的元素。

命名命名空间示例

在这个示例中，所有元素都在命名空间中。

HTML

HTML 或 SVG 中没有显式声明命名空间。

html
<p>This paragraph <a href="#">has a link</a>.</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">Link created in SVG</text>
  </a>
</svg>

CSS

CSS 声明了两个命名空间，然后将样式全局应用于链接（a）、应用于没有命名空间的链接（|a）、应用于任何命名空间或没有命名空间的链接（*|a），然后应用于两个不同的命名命名空间（svgNamespace|a 和 htmlNameSpace|a）。

css
@namespace svgNamespace url("http://www.w3.org/2000/svg");
@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml");
/* All `<a>`s in the default namespace, in this case, all `<a>`s */
a {
  font-size: 1.4rem;
}
/* no namespace */
|a {
  text-decoration: wavy overline lime;
  font-weight: bold;
}
/* all namespaces (including no namespace) */
*|a {
  color: red;
  fill: red;
  font-style: italic;
}
/* only the svgNamespace namespace, which is <svg> content */
svgNamespace|a {
  color: green;
  fill: green;
}
/* The htmlNameSpace namespace, which is the HTML document */
htmlNameSpace|a {
  text-decoration-line: line-through;
}

结果

选择器 |a（不在命名空间中的链接）不匹配任何链接。在 HTML 中，http://www.w3.org/1999/xhtml 是隐式的，这意味着所有 HTML 都在命名空间中，即使没有显式声明。在 SVG 中，即使没有显式设置，http://www.w3.org/2000/svg 命名空间也是隐式的。这意味着所有内容都在至少一个命名空间中。

默认命名空间和没有命名空间

在这个示例中，我们使用 JavaScript 创建一个没有命名空间的元素并将其附加到文档中。我们通过使用 @namespace 定义无名命名空间来将 SVG 命名空间设置为默认命名空间。

注意：如果定义了默认命名空间或无名命名空间，通用选择器和类型选择器仅应用于该命名空间中的元素。

HTML

HTML 或 SVG 中没有显式声明命名空间。

html
<p><a href="#">A link</a> in the implied HTML namespace.</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">Link created in SVG namespace</text>
  </a>
</svg>

JavaScript

使用 JavaScript 和 document.createElementNS，我们创建一个没有命名空间的锚链接，然后附加该链接。

js
// create 'no namespace' anchor
const a = document.createElementNS("", "a");
a.href = "#";
a.appendChild(document.createTextNode("Link created without a namespace"));

document.body.appendChild(a);

CSS

我们使用 @namespace 声明一个命名空间。通过省略命名空间的名称，@namespace 声明创建一个默认命名空间。

css
/* By omitting a name, this sets SVG as the default namespace */
@namespace url("http://www.w3.org/2000/svg");

/* `<a>` in the default (set to SVG) namespace */
a {
  font-size: 1.4rem;
}

/* `<svg>` and `<p>` in the default (set to SVG) namespace */
svg,
p {
  border: 5px solid gold;
}

/* links outside of any namespace */
|a {
  text-decoration: wavy underline purple;
  font-weight: bold;
}

/* links with any namespace or no namespace */
*|a {
  font-style: italic;
  color: magenta;
  fill: magenta;
}

结果

没有命名空间分隔符的选择器 a 仅匹配 SVG <a> 元素，因为 SVG 被设置为默认命名空间。

没有命名空间的选择器 |a 匹配 JavaScript 定义并附加的 <a>，因为该节点是唯一没有默认命名空间的节点。

规范

规范
CSS Namespaces 模块 Level 3
# 声明

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅