@namespace

嘗試一下

@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）。

形式語法

@namespace = 
  @namespace <namespace-prefix>? [ <string> | <url> ] ;  

<namespace-prefix> = 
  <ident>  

範例

指定預設和帶前綴的命名空間

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

規範

瀏覽器相容性

參見

• 命名空間速成課程
• CSS at 規則函式