data-star 属性不能直接用 attr() 读取为数值或用于计算，因为 css 的 attr() 仅支持在 content 中返回字符串，无法用于 width、opacity 或 calc() 等需数值的场景；必须通过 javascript 将其同步为 css 自定义属性（如 --star-value）后才能安全使用。
data-star 属性不能直接用 attr() 读取为数值或用于计算
HTML 的 data-star 是自定义属性，CSS 的 attr() 只能把它当字符串读出来，且仅限于 content 属性（比如伪元素里），不能用于 width、opacity 或 calc() 等需要数值的地方。
常见错误是写成这样，结果无效：
.item { width: attr(data-star px); } /* ❌ 不生效，attr() 在 width 上不被支持 */
-
attr(data-star)只在content中合法，例如::before { content: attr(data-star); } - 即使写成
content: attr(data-star number);，浏览器也**忽略类型提示**，一律返回字符串（如"4.5"） - 想用它控制样式（比如星级宽度、颜色深浅），必须配合 JavaScript 或 CSS 自定义属性中转
用 JavaScript 把 data-star 同步到 style.setProperty
这是最通用、兼容性最好的做法：把 HTML 属性值转成 CSS 自定义属性，再在 CSS 中使用。
document.querySelectorAll('[data-star]').forEach(el => {
const star = el.dataset.star;
el.style.setProperty('--star-value', star);
});
然后 CSS 就能安全使用：
.rating::before {
content: '★ '.repeat(calc(var(--star-value) * 1));
}
.rating { --star-value: 0; } /* 默认值，避免未设置时出错 */
-
dataset.star会自动去掉data-前缀，且保留原始字符串（包括小数、空格等） - 务必给
--star-value设默认值，否则未执行 JS 时 CSS 里var(--star-value)是invalid - 注意：CSS 中无法对
var(--star-value)做四舍五入或截断，repeat()也不接受小数 —— 如果要渲染半星，得靠额外 DOM 或 background-position
纯 CSS 实现星级显示的现实限制
如果坚持不用 JS，只能靠结构约定 + 属性选择器硬编码，比如限定 data-star 只取整数 1–5：
[data-star="1"] .stars::before { width: 20%; }
[data-star="2"] .stars::before { width: 40%; }
/* …… */
[data-star="5"] .stars::before { width: 100%; }
- 这种方式完全绕过
attr()，靠选择器匹配，稳定可靠 - 但无法处理小数（如
data-star="3.5"），也不能动态响应属性变更 - 维护成本随取值范围增大而上升，5 个值还好，10 个就难看了
attr() 在 content 里能做什么、不能做什么
attr(data-star) 唯一靠谱的用法就是展示文本内容：
.review::after {
content: '评分：' attr(data-star) '★';
color: #666;
}
输出类似 评分：4.5★。但要注意：
- 如果
data-star为空或不存在，attr()返回空字符串，不是0或none - 无法做字符串拼接以外的操作，比如
attr(data-star) + '分'是语法错误 - IE 完全不支持
attr()，哪怕只用在content里
真正要用 data-star 驱动样式变化，绕不开 JS 注入变量，或者接受硬编码的有限枚举。别指望 attr() 能当 CSS 的“数据绑定”用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
