★和☆适合只读或简单交互，但需处理对齐、大小、语义与点击响应；需用vertical-align、line-height、letter-spacing等优化显示；每颗星须独立包裹并绑定事件，配合data-id隔离行间逻辑，防止干扰。
★ 和 ☆ 是最轻量、最直接的星级实现方式，适合只读展示或简单交互场景。但直接往表格单元格里塞几个 ★ 不等于“能用”，得处理好对齐、大小、语义和点击响应。
表格单元格里直接写 ★ 为什么看起来不对齐？
浏览器默认把 ★ 当作普通文本字符，受行高、字体、基线影响，常出现上下偏移或左右松散。常见现象是星星浮在文字上方、挤在一起没间距、或跟旁边文字高度不一致。
- 用
font-family: "Segoe UI", "Apple Color Emoji", "Noto Color Emoji", sans-serif;提升渲染一致性（尤其 macOS / iOS） - 给单元格加
vertical-align: middle;，避免基线错位 - 用
line-height: 1;+font-size控制高度，别依赖默认行高 - 加
letter-spacing: 2px;或包裹每颗星用<span></span>并设margin-right，比空格更可控
怎么让 ★ 单元格支持点击评分？
纯字符本身不可交互，必须套一层可绑定事件的结构。不能只给 <td>★★★☆☆</td> 加 click 监听——你点不到具体哪颗星，也无法区分 3 星还是 4 星。
- 每颗星用独立
<span class="star" data-value="3"></span>包裹，再用 CSS 设置::before { content: "★"; }或直接写内联★ - 监听
td的click，用e.target.closest(".star")拿到被点的星，再读data-value - 别忘了禁用文本选中：
user-select: none;，否则双击会选中一串星星 - 悬停反馈靠
.star:hover ~ .star, .star:hover实现“点亮左侧全部”，但注意 CSS 选择器方向限制（~ 只能向后）
表格里多行评分时，★ 字符容易互相干扰吗？
不会。字符本身无状态，干扰只来自 JS 逻辑或 CSS 作用域没隔离。典型错误是所有行共用同一组事件监听器，导致点击第 5 行星星却更新了第 1 行的值。
- 给每行
<tr> 加唯一 <code>data-id，JS 处理时用它作为评分存储 key - 不要全局查
document.querySelectorAll(".star")，改查当前行：row.querySelector(".star-rating") - CSS 尽量用类名限定作用域，比如
.table-row .star而非泛用.star - 如果用
input[type=radio]方案（推荐用于表单提交），name 属性必须每行唯一，例如name="rating-102"，否则浏览器自动归为一组
字符图标看着简单，但表格环境放大了对 DOM 隔离、样式穿透和事件委托的敏感度。真正麻烦的从来不是画五颗星，而是让每一颗星知道自己属于哪一行、谁点了它、该更新哪里的数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
