了解：使用CSS namespace进行分隔

关于CSS命名空间模块，有兴趣可以直接参考W3C官方内容：CSS namespaces module。

命名空间
根据维基百科的定义，命名空间(namespace)可以让XML文档可能包括来自多个XML词汇表的元素或属性彼此间没有冲突。

例如常见的XHTML文档的命名空间：

htML xmlns="http://www.w3.org/1999/xhtml">
    

上面代码中的url地址就是个简单的命名空间名称，其并不指向之一实际的在线地址。浏览器不是使用或处理这个URL。当某个人阅读这里的文档代码的时候可以轻松理解命名空间所指。

CSS 命名空间
在2007年的时候，Bert Bos曾解释过为何CSS命名空间要引入：

命名空间模块很小，很简单，大概很少需要，但是正因为其小巧，所以添加到CSS中并没有什么负担。事实上，很多浏览器很早的时候就支持了。

它定义的唯一的事情就是在CSS中如何声明一个XML命名空间的前缀。当你使用的选择器仅匹配特定命名空间下的元素，则这东西就很管用。

举个例子，SVG使用了和HTML一样的元素和CSS属性。如果你为SVG文档和HTML文档同时应用了个样式文件的话，最好对SVG和HTML做样式分离以避免出现样式覆盖的情况。

使用

1. 声明你的XHTML文档类型：

   !DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
       

2. 在你的样式文件中，为CSS规则定义默认命名空间：

   @namespace "http://www.w3.org/1999/xhtml";
         @namespace svg "http://www.w3.org/2000/svg";
    

3. 有了上面的声明。你就可以只为SVG原因应用CSS规则啦：

   svg|a {
        color: whITe;
    }
       

   而其他规则默认会应用到HTML上。

和HTML5一起使用
HTML5允许行内SVG和MathML，这就意味着，你可以使用同一个样式文件定义行内SVG、MathML元素的样式。

HTML5的解析的好处是，如果文档是HTML(而非XHTML)，HTML5的解析器可以暗中分配命名空间到已知的词汇（到目前为止，SVG, XML和MathML）。这就意味着你无需使用xmlns为您的HTML5文档中的SVG或MathML元素明确指定命名空间。

坏消息是目前貌似仅Firefox Nightly在about:config上设置html5.enabled = true来解析和认知inline SVG或MathML.

这里有个demo页面，进去后会发现仅仅在火狐下左边是圆圆的，其他浏览器都是方的（包括Chrome浏览器）：

上图中左边的SVG图片就是使用了SVG命名空间定义样式。

参考文章
Spacing Out on CSS Namespaces

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！