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

瀏覽器相容性

BCD tables only load in the browser

參見