CSS选择器世界（第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2.3 CSS选择器的命名空间

CSS选择器中还有一个命名空间（namespace）的概念，这里简单介绍一下。

命名空间可以让来自多个XML词汇表的元素的属性或样式彼此之间不产生冲突，它的使用非常常见，例如XHTML文档：

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

又如SVG文件的命名空间：

<svg xmlns="http://www.w3.org/2000/svg">

上述代码中的xmlns属性值对应的URL地址就是一个简单的命名空间名称，并不指向实际的在线地址，浏览器不会使用或处理这个URL。

在CSS选择器世界中命名空间的作用也是避免冲突。例如，在HTML和SVG中都会用到<a>链接，此时就可能产生冲突，我们可以借助命名空间进行规避，具体方法是使用@namespace规则声明命名空间：

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* XHTML中的<a>元素 */
a {}
/* SVG中<a>元素 */
svg|a {}
/* 同时匹配XHTML和SVG的<a>元素 */
*|a {}

注意，上述CSS代码中的svg也可以换成其他字符，这里的svg并不表示svg标签的意思。

眼见为实，我们通过一个实际案例来直观地了解一下CSS选择器的命名空间。HTML和CSS代码如下：

<p>这是文字：<a href>点击刷新</a></p>
<p>这是SVG：<svg><a xlink:href><path d="..."/></a></svg></p>
@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
svg|a { color: black; fill: currentColor; }
a { color: gray; }

svg|a中有一个管道符|，管道符前面的字符表示命名空间的代称，管道符后面的内容则是选择器。本例的代码表示在http://www.w3.org/2000/svg这个命名空间下所有<a>的颜色都是black，由于xhtml的命名空间也被指定了，因此SVG中的<a>就不会受标签选择器a的影响，即便纯标签选择器a的优先级再高也无效。

最终的效果如图1-2所示，文字链接颜色为灰色，SVG图标颜色为黑色。

图1-2 不同命名空间下的样式保护

眼见为实，读者可以手动输入https://demo.cssworld.cn/selector2/1/2-2.php或扫描下面的二维码体验与学习。

CSS选择器命名空间的兼容性很好，至少10年前浏览器就已支持，但是，很少见人在项目中使用它，这是为什么呢？

原因有二。其一，在HTML中直接内联SVG的应用场景并不多，它更多的是作为独立的SVG资源使用，即使内联，也很少有需要对特性SVG标签进行样式控制的需求；其二，有其他更简单的替代方案，例如，如果我们希望SVG中所有的<a>元素的颜色都是black，可以直接用：

svg a { color: black; }

无须掌握复杂的命名空间语法就能实现我们想要的效果，这样做的唯一缺点就是增加了SVG中a元素的优先级，但是在大多数场景下，这对我们的实际开发没有任何影响。综合来看，这是一种性价比高很多的实现方式，几乎找不到需要使用命名空间的理由。

因此，对于CSS选择器的命名空间，我给大家的建议就是了解即可，在遇到大规模冲突场景时能想到还有这样一种解决方法就可以了。

上一章目录下一章