在CSS中@namespace有什么用途？

从中，我发现名称空间的用法如下所示：

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

---

但我想知道更多关于这件事。为什么要使用它？

在您给定的示例中，

color:blue

规则将仅限于

foo

命名空间中的

h1

元素（通过

url（example.com）

链接）

据我所知，这被认为是不经常需要的。而且看起来很奇怪

下面是对其应用的一个很好的总结：

它定义的唯一内容是如何在CSS中声明

XML命名空间

前缀。如果您想使用仅匹配某个命名空间中元素的选择器，则需要这样做

例如，SVG共享一些公共元素（例如

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

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

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

当使用非XML HTML时，已知元素将自动被分配名称空间。这意味着HTML元素将像在XHTML名称空间中一样工作，即使HTML文档中的任何地方都没有xmlns属性

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

从

当使用CSS浏览XML时，HTML名称空间会被特别处理。HTML名称空间中的元素会以HTML中的形式显示。这允许访问CSS尚未提供的功能。要嵌入的有用HTML元素的一些示例包括
，
，

...

在Microsoft®Internet Explorer中，前缀必须保持为HTML或HTML，才能将元素解释为HTML元素

块可用于在XML文档中嵌入CSS样式表。此块将扩充样式表处理指令指向的任何样式表。当没有外部样式表时，仍必须存在样式表处理指令，以指示应使用CSS样式表语言，即使未指定href属性

下面的示例显示了如何使用HTML名称空间、
元素和不带href属性的样式表处理指令将review.css样式表嵌入到XML文档中。
HTML


故事
{
显示：块；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：小；
宽度：30em；
}
餐厅
{
显示：块；
填料：1.2米；
字体大小：x-small；
边缘底部：1米；
}
...
...

嗯，它几乎从未被使用过……但目的是为了避免两个第三方在相同的样式名称上发生冲突……您在哪里使用它（或想要使用它），在什么上下文中，为什么？您链接到的文档包含指向CSS3名称空间模块和XML规范的链接，您可以在其中找到所需的所有信息。这些链接就在那里-我不相信您找不到它们。因此，原来是
@名称空间url(http://www.w3.org/1999/xhtml)
Firefox默认样式表中的行毕竟是有文档记录的。很有趣。可以找到更多信息和关于特定示例的问题。
<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>
    ...

<?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>
    ...