@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="#">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
/* Default namespace */
@namespace url("XML-namespace-URL");
@namespace "XML-namespace-URL";
/* Prefixed namespace */
@namespace prefix url("XML-namespace-URL");
@namespace prefix "XML-namespace-URL";
描述
定義的名稱空間可用於將通用、型別和屬性選擇器限制為僅選擇該名稱空間中的元素。@namespace 規則通常只在處理包含多個名稱空間的文件時有用，例如帶有內聯 SVG 或 MathML 的 HTML，或者混合了多個詞彙表的 XML。
任何 @namespace 規則都必須遵循所有 @charset 和 @import 規則，並且在樣式表中的所有其他 at-rules 和 樣式宣告之前。
@namespace 可以用來定義樣式表的預設名稱空間。當定義了預設名稱空間時，所有通用和型別選擇器（但不包括屬性選擇器，詳見下文註釋）都只適用於該名稱空間中的元素。
@namespace 規則還可以用來定義一個名稱空間字首。當通用、型別或屬性選擇器帶有名稱空間字首時，該選擇器只在元素或屬性的名稱空間和名稱都匹配時才匹配。
在 HTML 中，已知的外部元素會自動分配名稱空間。這意味著 HTML 元素的行為就像它們在 XHTML 名稱空間（http://www.w3.org/1999/xhtml）中一樣，即使文件中沒有任何 xmlns 屬性，並且<svg> 和<math> 元素將被分配其正確的名稱空間（分別為 http://www.w3.org/2000/svg 和 http://www.w3.org/1998/Math/MathML）。
注意：在 XML 中，除非直接在屬性上定義了字首（例如，xlink:href），否則該屬性沒有名稱空間。換句話說，屬性不繼承它們所在元素的名稱空間。為了匹配這種行為，CSS 中的預設名稱空間不適用於屬性選擇器。
正式語法
@namespace =
@namespace <namespace-prefix>? [ <string> | <url> ] ;
<namespace-prefix> =
<ident>
示例
指定預設和帶字首的名稱空間
css
@namespace url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");
/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
a {
}
/* This matches all SVG <a> elements */
svg|a {
}
/* This matches both XHTML and SVG <a> elements */
*|a {
}
規範
| 規範 |
|---|
| CSS 名稱空間模組第三級 # 宣告 |
瀏覽器相容性
載入中…