@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 是一個 at-rule,它決定要在 CSS 樣式表中要使用的 XML 命名空間

嘗試一下

語法

css
/* 默認的命名空間 */
@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/svghttp://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>* )

範例

指定默認及前缀的命名空間

css
@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 {
}

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@namespace

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見