命名空间分隔符

语法

namespace|element { style properties }

示例

默认情况下，HTML 或 SVG 元素中的所有元素都具有命名空间，因为 http://www.w3.org/1999/xhtml 和 http://www.w3.org/2000/svg 命名空间是隐含的。可通过在 document.createElementNS 方法中将命名空间参数设为空字符串，创建无命名空间的元素。

具名命名空间示例

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

HTML

HTML 或 SVG 中均未显式声明命名空间。

<p>此段落<a href="#">包含链接</a>。</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">SVG 中的链接</text>
  </a>
</svg>

CSS

该 CSS 声明了两个命名空间，随后为链接全局赋予样式（a），为无命名空间的链接赋予样式（|a），为任何命名空间或无命名空间的链接赋予样式（*|a），最后为两个不同的命名命名空间赋予样式（svgNamespace|a 和 htmlNameSpace|a）。

@namespace svgNamespace url("/proxy/www.w3.org/2000/svg");
@namespace htmlNameSpace url("/proxy/www.w3.org/1999/xhtml");
/* 所有默认命名空间中的 `<a>`，在此示例中是所有的 `<a>` */
a {
  font-size: 1.4rem;
}
/* 无命名空间 */
|a {
  text-decoration: wavy overline lime;
  font-weight: bold;
}
/* 所有命名空间（包括无命名空间） */
*|a {
  color: red;
  fill: red;
  font-style: italic;
}
/* 仅 svgNamespace 命名空间，即 <svg> 内容 */
svgNamespace|a {
  color: green;
  fill: green;
}
/* htmlNameSpace 命名空间，即 HTML 文档 */
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 中均未显式声明命名空间。

<p>在隐含的 HTML 命名空间中的<a href="#">链接</a>。</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">在 SVG 命名空间中的链接。</text>
  </a>
</svg>

JavaScript

通过 JavaScript 的 document.createElementNS，我们创建一个无命名空间的锚点链接，并插入该链接。

// 创建“无命名空间”的锚点
const a = document.createElementNS("", "a");
a.href = "#";
a.appendChild(document.createTextNode("无命名空间的锚点"));

document.body.appendChild(a);

CSS

我们使用 @namespace 声明命名空间。若省略命名空间名称，@namespace 声明将创建默认命名空间。

/* 通过省略名称，将 SVG 设为默认命名空间 */
@namespace url("/proxy/www.w3.org/2000/svg");

/* 默认命名空间（设为 SVG）的 `<a>` */
a {
  font-size: 1.4rem;
}

/* 默认命名空间（设为 SVG）的 `<svg>` 和 `<p>` */
svg,
p {
  border: 5px solid gold;
}

/* 任何命名空间之外的链接 */
|a {
  text-decoration: wavy underline purple;
  font-weight: bold;
}

/* 具有任何命名空间或无命名空间的链接 */
*|a {
  font-style: italic;
  color: magenta;
  fill: magenta;
}

结果

未添加命名空间分隔符的选择器 a 仅匹配了 SVG 中的 <a> 元素，因为 SVG 被设为默认命名空间。

未添加命名空间的选择器 |a 匹配了通过 JavaScript 定义并追加的 <a> 元素，因为该节点是唯一不具有默认命名空间的节点。

规范

浏览器兼容性

参见

• @namespace
• Document.createElementNS() 方法
• Element.namespaceURI 属性
• CSS 类型选择器
• CSS 通配选择器
• CSS 选择器模块