CSS如何选择特定命名空间的元素_通过命名空间选择器区分css-css教程-PHP中文网

CSS命名空间选择器仅在XML/XHTML文档中有效，需用@namespace声明前缀与URI映射，再以prefix|element语法选择；HTML文档中xmlns无效，元素namespaceURI为null，无法匹配。

css如何选择特定命名空间的元素_通过命名空间选择器区分css

如何用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文档中，会被当作未知HTML元素处理，namespaceURI是null，不是"..."

正确写法：用`|`分隔符配合`@namespace`

必须先用@namespace声明前缀与URI的映射，再用prefix|element或prefix|*语法选择。注意：该规则只在XML文档或XHTML文档中生效。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

/* 在 .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; }</style>

@namespace必须出现在样式表最前面（或至少在相关规则之前）
前缀名（如svg）可以任意取，但必须和选择器中的前缀严格一致
|是分隔符，不是“或”，不能写成svg:svg或svg\|svg
若省略前缀直接写|element，表示匹配默认命名空间下的元素；*|element匹配任何命名空间（含无命名空间）

为什么你在HTML里试不出来

因为HTML解析器根本不处理xmlns——哪怕你写了hi，浏览器也会把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元素本身有固定URI，但它们是硬编码进浏览器的，不依赖@namespace声明就能被svg|选中——前提是文档类型支持

真正要区分命名空间，得确认文档被当XML解析，否则所有@namespace和|语法都只是摆设。