Question

从doc开始，我发现如下所示使用命名空间：

@namespace foo url(http://www.example.com);
 foo|h1 { color: blue }

但我想了解更多相关信息。我们为什么要用它？

Answer 1

在您给出的示例中，color: blue规则仅限于h1命名空间中的foo个元素（由url(example.com)链接）。

据我所知，它被认为并不经常需要。它当然看起来很奇怪。

以下是其应用程序的一个很好的摘要：http://nimbupani.com/spacing-out-on-css-namespaces.html

它唯一定义的是如何在CSS中声明XML namespace前缀。如果要使用仅匹配特定名称空间中元素的选择器，则需要这样做。

例如，SVG与HTML和HTML共享一些共同元素（例如<a>）和CSS属性。如果您对HTML和SVG文档使用相同的样式表，则最好将SVG和HTML的样式分开以防止任何重叠。 ...

这是对其各个部分的一个很好的逐步细分：

@namespace声明默认命名空间，并将命名空间绑定到命名空间前缀。默认命名空间应用于没有显式命名空间组件的名称。 ...如果声明带有前缀的@namespace规则，则可以在名称空间限定名称中使用该前缀。 ...

最后，这是MDN的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace

@namespace规则是一个规则，用于定义将在样式表中使用的XML命名空间。定义的命名空间可用于限制通用，类型和属性选择器，以仅选择该命名空间下的元素。 @namespace规则通常仅在处理包含多个名称空间的XML文档时有用 - 例如，嵌入了SVG的XHTML文档。

@namespace规则可用于定义样式表的默认命名空间。当定义默认命名空间时，所有通用和类型选择器（但不是属性选择器，请参阅下面的注释）仅适用于该命名空间上的元素。

@namespace规则还可用于为样式表定义名称空间前缀。当通用，类型或属性选择器以名称空间前缀为前缀时，该选择器仅匹配命名空间（而不仅仅是元素或属性的类型或属性选择器的名称匹配。

使用非XML HTML时，将自动为已知元素分配名称空间。这意味着HTML元素就像它们在XHTML命名空间中一样，即使HTML文档中没有任何xmlns属性。

请注意，在XML中，除非直接在属性上定义前缀，否则该属性没有名称空间。换句话说，属性不会继承它们所依赖的元素的命名空间。要匹配此行为，CSS中的默认命名空间不适用于属性选择器。

Answer 2

来自MSDN

使用CSS浏览XML时，会特别处理HTML命名空间。 HTML命名空间中的元素显示为HTML中显示的元素。这允许访问CSS尚未提供的功能。要嵌入的有用HTML元素的一些示例包括<TABLE>，<A>，<IMG>，<SCRIPT>和<STYLE>。

例如，您可以在以下餐厅评论样本中添加链接和徽标。首先，您必须在文档顶部声明HTML命名空间，然后在嵌入的HTML元素上使用HTML前缀。以这种方式嵌入的HTML必须是格式良好的XML，因此<IMG>元素需要最小化的结束标记。
<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
  ...
  <restaurant>
    <name>Red Apple Inn</name>
    <logo>
      <HTML:A href="javascript:alert('Visit the Red Apple Inn!')">
        <HTML:IMG src="red-apple.gif" height="50" width="200"/>
      </HTML:A>
    </logo>
    ...
在Microsoft®InternetExplorer中，前缀必须保留为HTML或html，以便将元素解释为HTML元素。

<HTML:STYLE>块可用于在XML文档中嵌入CSS样式表。此块将增加样式表处理指令指向的任何样式表。如果没有外部样式表，则仍然必须存在样式表处理指令，以指示应使用CSS样式表语言显示XML文档，即使未指定href属性。

以下示例显示如何使用HTML命名空间，<HTML:STYLE>元素和没有href属性的样式表处理指令将review.css样式表嵌入到XML文档中。   HTML
<?xml version="1.0"?>
<?xml-stylesheet type="text/css"?>
<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
  <HTML:STYLE>
    story
    {
      display: block;
      font-family: Arial, Helvetica, sans-serif;
      font-size: small;
      width: 30em;
    }
    restaurant
    {
      display: block;
      padding: 1.2em;
      font-size: x-small;
      margin-bottom: 1em;
    }
    ...
  </HTML:STYLE>
  <restaurant>
    ...

在CSS中@namespace有什么用？

2 个答案: