CSS命名空间选择器仅在XML/XHTML文档中有效，需用@namespace声明前缀与URI映射，再以prefix|element语法选择；HTML文档中xmlns无效，元素namespaceURI为null，无法匹配。
如何用CSS选择带命名空间的XML/HTML元素
浏览器原生支持命名空间选择器，但仅限于XML文档或xmlns声明明确、解析为XML上下文的场景（比如.xhtml文件或document.createElementNS()创建的元素），普通HTML文档中写的xmlns:foo几乎无效。
[attr="value"]不能替代命名空间选择器
有人试图用属性选择器模拟命名空间，比如写svg[xmlns="http://www.w3.org/2000/svg"]，这完全没用——命名空间不是普通属性，它绑定在元素节点的内部命名空间URI上，不暴露为可选中的getAttribute("xmlns")值。
- 命名空间匹配靠的是元素节点的
namespaceURI属性，CSS引擎在解析时直接比对URI字符串 -
xmlns:foo="..."只是前缀声明，真正起作用的是元素标签本身是否被解析为该URI下的节点 - 在HTML文档中，
<bar></bar>会被当作未知HTML元素处理，namespaceURI是null，不是"..."
正确写法：用|分隔符配合@namespace
必须先用@namespace声明前缀与URI的映射，再用prefix|element或prefix|*语法选择。注意：该规则只在XML文档或XHTML文档中生效。
/* 在 .xhtml 文件或 <style type="application/xml"> 中才有效 */
@namespace svg "http://www.w3.org/2000/svg";
@namespace xlink "http://www.w3.org/1999/xlink";
<p>svg|svg { width: 100px; }
svg|path { fill: red; }
xlink|href { color: blue; }-
@namespace必须出现在样式表最前面（或至少在相关规则之前） - 前缀名（如
svg）可以任意取，但必须和选择器中的前缀严格一致 -
|是分隔符，不是“或”，不能写成svg:svg或svg\|svg - 若省略前缀直接写
|element，表示匹配默认命名空间下的元素；*|element匹配任何命名空间（含无命名空间）
为什么你在HTML里试不出来
因为HTML解析器根本不处理xmlns——哪怕你写了<bar>hi</bar>，浏览器也会把foo:bar当成一个自定义HTML元素，其namespaceURI是null，不是"urn:test"。此时@namespace foo "urn:test"; foo|bar完全不匹配。
立即学习“前端免费学习笔记（深入）”；
- 唯一能触发命名空间解析的方式：用
DOMParser解析XML字符串，或服务端返回Content-Type: application/xhtml+xml - 现代前端框架（React/Vue）生成的命名空间标签，如果挂载到HTML文档中，依然走HTML解析流程，命名空间丢失
- SVG内联在HTML中（
<svg><path></path></svg>）是特例：SVG元素本身有固定URI，但它们是硬编码进浏览器的，不依赖@namespace声明就能被svg|选中——前提是文档类型支持
真正要区分命名空间，得确认文档被当XML解析，否则所有@namespace和|语法都只是摆设。
