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 里没有<div data-id="123"> 这种 HTML 元素，CSS 根本不识别； <li>现代浏览器对 <code>attr()的支持也仅限于attr(属性名 string)（如attr(title)），且仅在部分 CSS 属性（主要是content）中可用，不支持计算值、不支持 XML 命名空间属性、不支持动态求值。 -
用 JavaScript 解析 XML：用
DOMParser加载 XML 字符串，遍历节点，提取getAttribute('id')，再插入到 HTML 元素中（例如<span class="xml-id"></span>），最后用 CSS 控制样式； -
用 XSLT 转换 XML 为 HTML：写 XSLT 模板，把
@id输出为带 class 的 HTML 标签，再用 CSS 设置.xml-id::before { content: attr(data-id); }（这时已转成 HTML，attr()才起作用）； - 服务端预处理：后端（如 Python/Node.js）解析 XML，生成含属性值的 HTML 片段，前端只负责展示。
可行方案：把 XML 当作数据源，用其他方式“显示属性”
想在页面上显示 XML 元素的属性（比如 <book id="978-0-395-72847-6" category="fiction"></book> 中的 id），推荐以下实际可用的方法：
小提醒：attr() 的正确用法（仅限 HTML 场景）
如果你是在 HTML 页面里模拟类似需求（比如给自定义标签加属性），可以这样用：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<data-item data-code="ABC123" data-desc="示例项">内容</data-item>
<style>
data-item::after {
content: " [ID: " attr(data-code) "]";
color: #666;
}
</style>
✅ 这样会在每个 <data-item></data-item> 后显示 [ID: ABC123] —— 但前提是文档是 HTML，且元素存在于 DOM 中。
基本上就这些。想靠纯 CSS + XML + attr() 直接显示属性值，目前不可行。得靠 JS、XSLT 或服务端配合。
