@namespace
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
嘗試一下
@namespace svg url("http://www.w3.org/2000/svg");
a {
color: orangered;
text-decoration: underline dashed;
font-weight: bold;
}
svg|a {
fill: blueviolet;
text-decoration: underline solid;
text-transform: uppercase;
}
<p>
<a href="#">這是一個普通的 HTML 連結</a>
</p>
<svg width="250px" viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
<a href="#">
<text x="0" y="15">這是在 SVG 中建立的連結</text>
</a>
</svg>
語法
/* 預設命名空間 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";
/* 帶前綴的命名空間 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
描述
定義的命名空間可用於限制通用、型別和屬性選擇器，使其僅選取該命名空間內的元素。通常只有在處理包含多個命名空間的文件時（例如帶有行內 SVG 或 MathML 的 HTML，或混合多種詞彙的 XML），@namespace 規則才有用。
任何 @namespace 規則都必須遵循所有的 @charset 和 @import 規則，並位於樣式表中所有其他 at 規則和樣式宣告之前。
@namespace 可用於為樣式表定義預設命名空間。當定義了預設命名空間時，所有的通用和型別選擇器（但不包括屬性選擇器，請參閱下方的註解）僅適用於該命名空間中的元素。
@namespace 規則也可用於定義命名空間前綴。當通用、型別或屬性選擇器帶有命名空間前綴時，該選擇器只有在元素或屬性的命名空間和名稱都匹配時才會匹配。
在 HTML 中，已知的外部元素會被自動分配命名空間。這意味著即使文件中沒有任何 xmlns 屬性，HTML 元素的行為也會像它們在 XHTML 命名空間（http://www.w3.org/1999/xhtml）中一樣，而 <svg> 和 <math> 元素將被分配到它們各自的命名空間（分別為 http://www.w3.org/2000/svg 和 http://www.w3.org/1998/Math/MathML）。
備註：
在 XML 中，除非直接在屬性上定義了前綴（例如 xlink:href），否則該屬性沒有命名空間。換句話說，屬性不會繼承其所在元素的命名空間。為了匹配這種行為，CSS 中的預設命名空間不適用於屬性選擇器。
形式語法
@namespace =
@namespace <namespace-prefix>? [ <string> | <url> ] ;
<namespace-prefix> =
<ident>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
範例
指定預設和帶前綴的命名空間
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* 這會匹配所有的 XHTML <a> 元素，因為 XHTML 是預設的無前綴命名空間 */
a {
}
/* 這會匹配所有的 SVG <a> 元素 */
svg|a {
}
/* 這會匹配 XHTML 和 SVG 的 <a> 元素 */
*|a {
}
規範
| Specification |
|---|
| CSS Namespaces Module Level 3 # declaration |
瀏覽器相容性
Loading…