css 的 attr() 函数仅在伪元素 ::before/::after 的 content 属性中有效，无法直接在 或 中使用；显示 data-* 属性值必须依赖 javascript 读取后写入 dom，推荐用 getattribute() 和 textcontent，并优先考虑服务端模板直接输出。
attr() 函数在 HTML 表格中根本不能直接使用
你没法在 <td> 或 <code><th> 里写 <code>attr(data-value) 来显示自定义属性值——这不是 CSS 或 HTML 的合法语法，浏览器会直接忽略。CSS 的 attr() 函数仅在 content 属性中有效（且仅限伪元素 ::before/::after），不能用于渲染实际文本内容。
想让 data-* 属性值出现在单元格里，得靠 JavaScript
真实场景下，你要把 data-value="123" 这类属性的值“显示出来”，必须用 JS 读取再写入 DOM。常见做法是遍历所有带目标属性的单元格：
document.querySelectorAll('td[data-value], th[data-value]').forEach(cell => {
const value = cell.getAttribute('data-value');
if (value !== null) cell.textContent = value;
});
注意点：
-
getAttribute()比dataset.value更可靠——后者对连字符命名（如data-user-id）会转成驼峰（userId），容易出错 - 别用
innerHTML直接赋值，除非你确认值是可信的；用textContent防 XSS - 如果表格是动态生成的（比如 Vue/React 渲染后），这段脚本得等 DOM 真正就绪后再执行
用 CSS ::before + attr() 只能“叠加显示”，不是替换内容
如果你只是想在原有单元格文字旁边加个提示（比如小标签），可以用这个方案：
td[data-value]::before {
content: '[' attr(data-value) '] ';
font-size: 0.8em;
color: #666;
}
但要注意：
- 它不会改变
<td>Hello</td>本身的文本，只会额外插入内容 -
attr()只支持字符串，数值、布尔或对象都会转成字符串，且无法做格式化（比如千分位、日期转换） - IE 完全不支持
attr()用于非content，而即使现代浏览器，也不支持在普通属性（如width）里用attr()
服务端或模板引擎才是更稳的源头处理方式
如果数据来自后端，与其在前端反复 patch，不如让模板直接输出值：
比如用 Jinja2：<td>{{ row.price }}</td>，而不是 <td data-price="{{ row.price }}"></td> 再 JS 填充。原因很实在：
- 首屏无需 JS 就能显示，SEO 和可访问性更好
- 避免因 JS 执行失败或延迟导致表格空白
- 减少 DOM 查询和重绘开销，尤其表格行数多时
只有当你必须复用已有 data 属性做其他逻辑（比如排序、筛选），又恰好需要同时展示它，才值得加那几行 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
