名稱空間分隔符
名稱空間分隔符 (|) 將選擇器與名稱空間分開，用於標識型別選擇器的名稱空間，或指示其不存在。
/* 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 名稱空間模組第三級 # 宣告 |
瀏覽器相容性
載入中…