@namespace
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
嘗試一下
語法
/* 默認的命名空間 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";
/* 有前綴的命名空間 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
說明
@namespace
可以用来限制樣式的選擇器(包含通用的、元素選擇器和屬性選擇器)僅套用於指定的命名空間。@namespace
通常在處理有多個命名空間的檔案時很有用——例如有內嵌 SVG 或 MathML 的 HTML、混和多個命名空間的 XML 等。
@namespace
必须放在 @charset
和 @import
規則之後,在其他 at-rule 及 Style Declaration 之前。
@namespace
可以用來定義默認命名空間或是有前綴的命名空間的樣式。所有在指定命名空間下的通用、元素選擇器都會套用該樣式,屬性選擇器則只適用於「有前綴的命名空間」(詳見下方註釋)。
在 HTML5,已知的外部元素會自動為其分配命名空間。舉例來說,即使沒有設置 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
),該屬性就不會繼承元素的命名空間(亦即 link
的命名空間可能是 http://www.w3.org/1999/xhtml
而不是 http://www.w3.org/2000/svg
)。因此,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> 元素都會套用以下樣式 */
a {
}
/* 以下則是會套用所有「命名空間為 http://www.w3.org/2000/svg 的 svg」底下的所有 <a> 元素 */
svg|a {
}
/* 無論是 XHTML 還是 SVG 的 <a> 元素都會套用以下樣式 */
*|a {
}
瀏覽器相容性
BCD tables only load in the browser