用 data-difficulty 属性存难度值最稳妥推荐整数1–5CSS用属性选择器匹配显示星级JS读取时需类型转换避免 aria-label 冗余团队须统一数值含义。用 data- 属性存难度值最稳妥HTML 本身没有原生的“题目难度”语义标签硬塞 meter 或 progress 反而误导可访问性。直接用自定义 data- 属性是事实标准浏览器不解析但 JS/CSS 都能读取也符合 HTML5 规范。常见错误是把难度写进 class比如 classdiff-3结果样式一改、JS 就断或者用 title用户 hover 才看到无法程序化读取。data-difficulty3推荐数值整数 1–5便于排序、筛选、条件渲染data-difficultyhard字符串也可但后续 JS 处理要加映射表容易漏 case别用 difficulty3非标准属性验证失败部分旧 IE 可能忽略CSS 用属性选择器显示星级图标数值型 data-difficulty 能直接驱动 CSS避免为每个难度写独立 class。关键是用属性选择器 伪元素不污染 HTML 结构。注意CSS 无法做数值比较比如 “大于 3 显示红色”只能精确匹配星级数量得手动写死但维护成本极低。立即学习“前端免费学习笔记深入”给题目容器加 data-difficulty4CSS 写span[data-difficulty1]::after { content: ★; }span[data-difficulty2]::after { content: ★★; }/* ...依此类推 */想动态生成更多星必须用 JS 渲染CSS 做不了循环JS 读取时别忘了类型转换dataset 返回的永远是字符串el.dataset.difficulty 3 会出错——因为字符串比较和数值比较逻辑不同10 3 是 true。 Felvin AI无代码市场只需一个提示快速构建应用程序