CSS - @规则

@namespace 是用于指定要在 CSS 样式表中使用的 XML 命名空间的 at 规则。

  • XML 命名空间通过 @namespace 规则创建并在 CSS 样式中使用

  • 在具有大量命名空间的文档中，例如与内联 SVG 或 MathML 配对的 HTML，或混合 XML 词汇表，这些命名空间可能会将选择限制为该命名空间内的某些项目。

  • 使用 @namespace 宏进行的命名空间声明必须出现在样式表中的其他 at 规则和样式声明之前，并遵守 @charset 和 @import 规则。

  • 样式表的默认命名空间可以使用@namespace 设置。对于默认命名空间，通用和类型选择器（属性选择器除外）仅适用于该命名空间内的项目。

  • 命名空间前缀也可以使用 @namespace 定义规则。当命名空间前缀作为通用、类型或属性选择器的前缀时，仅当元素或属性的命名空间和名称匹配时，选择才匹配。

  • 在 HTML 中，命名空间自动给予认可的外国组件。因此，即使页面没有 xmlns 属性的任何实例。

  • HTML 组件的行为就像它们位于 XHTML 命名空间中一样，并且 svg 和数学元素将被赋予适当的命名空间。

示例

以下示例演示 @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>