命名空间分隔符
命名空间分隔符 (|) 将选择器与命名空间分开，用于标识类型选择器的命名空间，或指示其不存在。
/* 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>元素
语法
namespace|element { style properties }
示例
默认情况下，HTML 或 SVG 元素中的所有元素都具有命名空间，因为 http://www.w3.org/1999/xhtml 和 http://www.w3.org/2000/svg 命名空间是隐式的。document.createElementNS 方法（将命名空间参数设置为空字符串）可用于创建没有命名空间的元素。
命名命名空间示例
在此示例中，所有元素都在一个命名空间中。
HTML
HTML 或 SVG 中未显式声明任何命名空间。
<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) 分配样式。
@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 中未显式声明任何命名空间。
<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，我们创建一个没有命名空间的锚链接，然后附加该链接。
// 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 声明创建了一个默认命名空间。
/* 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 命名空间模块第三级 # 声明 |
浏览器兼容性
加载中…