@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 命名空間。

嘗試一下

@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="#">This is an ordinary HTML link</a>
</p>

<svg width="250px" viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <a href="#">
    <text x="0" y="15">This is a link created in SVG</text>
  </a>
</svg>

語法

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/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>* )

範例

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

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

瀏覽器相容性

參見

命名空間速成班