@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 命名空间模块第三级 # 声明 |
浏览器兼容性
加载中…