CSS - @namespace

@namespace 是一种 at-rule，用于指定要在 CSS 样式表中使用的 XML 命名空间。

XML 命名空间是通过 @namespace 规则创建的，并在 CSS 样式表中使用。
在具有许多命名空间的文档中，例如与内联 SVG 或 MathML 配对的 HTML，或混合 XML 词汇表，这些命名空间可能会将选择限制为该命名空间内的某些项目。
使用@namespace 宏进行的 Namespace 声明必须出现在样式表中的其他 at 规则和样式声明之前，并遵守 @charset 和 @import 规则。
样式表的默认命名空间可以使用 @namespace 设置。使用默认命名空间时，universal 和 type 选择器（属性选择器除外）仅适用于该命名空间内的项。
还可以使用 @namespace 规则定义命名空间前缀。当命名空间前缀作为通用、类型或属性选择器的前缀时，仅当元素或属性的命名空间和名称匹配时，所选内容才会匹配。
在 HTML 中，命名空间会自动分配给已识别的外部组件。因此，即使页面没有任何 xmlns 属性的实例。
HTML 组件的行为就像它们在 XHTML 命名空间中一样，并且 svg 和 math 元素将被赋予它们相应的命名空间。

例

以下示例演示了 @namespace 的用法。


<html>
<head>
<style>
	 	 @namespace svg url('http://www.w3.org/2000/svg');
	 	 body {
	 	 	 	 font-family: Arial, sans-serif;
	 	 	 	 background-color: #f0f0f0;
	 	 }
	 	 .html-link {
	 	 	 	 color: green;
	 	 	 	 text-decoration: underline;
	 	 	 	 font-weight: bold;
	 	 }
	 	 svg|a {
	 	 	 	 fill: navy;
	 	 	 	 text-decoration: underline;
	 	 	 	 font-weight: bold;
	 	 }
</style>
</head>
<body>
<p><a href="#" class="html-link">This is a regular 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>
</body>
</html>

打印本页