最轻量方案是直接在<td>中用Unicode星号+color着色，仅适用于只读场景；交互式星级必须使用input[type="radio"]结构，确保表单提交、键盘导航和移动端可用性。
直接在 <td> 里写 ★☆★☆★ 并用 CSS 上色，是最轻量、兼容性最好的方案，但只能静态展示；若要支持点击交互，必须引入 input[type="radio"] 结构，否则无法提交值、不支持键盘导航、移动端响应也靠不住。
Unicode 星号 + 内联 style 着色（只读场景）
适合表格中仅需展示已有评分（如后台管理页、报表导出页），无需用户操作。
- 用 ★ 表示已评，☆ 表示未评，避免用 emoji（渲染不一致）或 SVG（增加 DOM 负担）
- 着色必须用
color，不是fill或background-color—— Unicode 字符是文本，只有color生效 - 别用过时的
bordercolor或bgcolor属性，它们在 HTML5 中已被废弃，现代浏览器直接忽略 - 示例：
<td style="color: #ffc107; font-size: 18px;">★★★☆☆</td>
为什么不能只用 div + click 事件模拟星星？
常见错误：在表格单元格里写五个 <div class="star">，再用 JS 绑 click。这会导致三个硬伤：
- 表单提交时后端收不到
rating值——div没有name和value，无法参与序列化 - Tab 键无法聚焦到星星上，屏幕阅读器读不出当前选中状态，WCAG 至少 AA 级不通过
- iOS Safari 的
:hover在触摸设备上延迟触发甚至失效，用户点完没反馈，以为没点上
表格中嵌入可交互星级的正确结构
每个 <td> 单独封装一套 input[type="radio"]，确保互不影响；重点在 DOM 顺序和隐藏方式：
立即学习“前端免费学习笔记（深入）”；
-
input必须逆序排列：id="s5"→id="s4"→ … →id="s1"，否则~兄弟选择器无法向左高亮 - 隐藏
input用position: absolute; opacity: 0; width: 0; height: 0;，不能用display: none（会断开兄弟选择器链） -
label必须紧跟对应input后，且用for显式关联，否则点击无效 - 反转显示顺序用
direction: rtl或flex-direction: row-reverse，语义上“5星最右”才符合直觉 - 示例片段：
<td><input type="radio" id="s5" name="r1" value="5"><label for="s5">★</label><input type="radio" id="s4" name="r1" value="4"><label for="s4">★</label></td>
表格里多个星级组件共存的关键细节
一个表格常有多行多列都要评分，容易踩的坑集中在命名和作用域：
- 每行的
name必须唯一，比如name="rating-row-1"、name="rating-row-2"，否则点第2行的星星会取消第1行的选择 - 别给所有星星用同一个
id（如都叫s5），HTML id 必须全局唯一，重复会导致 JS 读取错乱、CSS 选择器失灵 - 如果用 JS 读取当前评分，应监听
change事件而非click，因为用户可能用键盘空格键选择 - 移动端点击区域太小？给
label加padding: 4px或min-width: 24px，比放大字体更可靠
真正麻烦的不是画五颗星，而是让每颗星在表格不同单元格里都保持语义正确、键盘可用、触控响应、样式隔离——这些细节漏掉一个，用户就会卡在“点了但没反应”或者“点了但提交的是错的”。
