CSS 的 content 属性无法直接显示 XML 元素属性值，因 attr() 仅支持 HTML 伪元素且浏览器实现有限；XML 非渲染文档类型，不触发 CSS 选择器与伪元素机制；可行方案为 JavaScript 解析、XSLT 转换或服务端预处理。
CSS 的 content 属性本身**不能直接读取或显示 XML 文档中元素的属性值**，尤其是通过 attr() 函数——因为 attr() 在 CSS 中**仅对 HTML（或类 HTML）文档中的属性有效，且仅在伪元素（::before / ::after）中支持，且浏览器实现非常有限**。
XML 不是 HTML，CSS 无法原生解析 XML 属性
XML 是标记语言，但不是浏览器默认渲染的文档类型。当你用浏览器打开一个纯 XML 文件时，它通常只做语法高亮展示（由浏览器内置 XSLT 或样式表驱动），**不触发 CSS 的常规选择器和伪元素机制**。也就是说：
-
attr(data-id)这样的写法，在 XML 文档中不会生效； - 即使你写了
div::before { content: attr(data-id); }，XML 里没有这种 HTML 元素，CSS 根本不识别；- 现代浏览器对
attr()的支持也仅限于attr(属性名 string)（如attr(title)），且仅在部分 CSS 属性（主要是content）中可用，不支持计算值、不支持 XML 命名空间属性、不支持动态求值。可行方案：把 XML 当作数据源，用其他方式“显示属性”
想在页面上显示 XML 元素的属性（比如
id），推荐以下实际可用的方法：-
用 JavaScript 解析 XML：用
DOMParser加载 XML 字符串，遍历节点，提取getAttribute('id')，再插入到 HTML 元素中（例如），最后用 CSS 控制样式； -
用 XSLT 转换 XML 为 HTML：写 XSLT 模板，把
@id输出为带 class 的 HTML 标签，再用 CSS 设置.xml-id::before { content: attr(data-id); }（这时已转成 HTML，attr()才起作用）； - 服务端预处理：后端（如 Python/Node.js）解析 XML，生成含属性值的 HTML 片段，前端只负责展示。
小提醒：attr() 的正确用法（仅限 HTML 场景）
如果你是在 HTML 页面里模拟类似需求（比如给自定义标签加属性），可以这样用：
立即学习“前端免费学习笔记（深入）”；
内容 ✅ 这样会在每个
[ID: ABC123]—— 但前提是文档是 HTML，且元素存在于 DOM 中。基本上就这些。想靠纯 CSS + XML +
attr()直接显示属性值，目前不可行。得靠 JS、XSLT 或服务端配合。 - 现代浏览器对
