纯html+css可实现表情评分，需严格遵循input顺序、兄弟选择器逻辑及emoji渲染一致性要求。
直接用纯 HTML + CSS 就能实现表情评分，不需要 JS，但必须注意 input 顺序、:checked 选择器的兄弟匹配逻辑，以及 emoji 字符在不同系统下的渲染一致性。
为什么用 input[type="radio"] + label 而不是直接写 emoji？
因为要支持“选中某表情后，前面所有表情都高亮”这种连贯反馈，纯 CSS 只能靠兄弟选择器（~）驱动。如果直接写 😀 或 ?，就失去了状态绑定能力。
-
input必须按评分从高到低排列（比如 5 分在最左，1 分在最右），否则~无法向后匹配 -
label必须紧跟对应input，且不能被其他元素打断（如注释、空格换行可能破坏渲染） - 每个
label的for属性值必须和input的id完全一致，大小写敏感
label::before 里插 emoji 还是 SVG？
插 emoji 更轻量、易维护，但存在平台差异：iOS 显示圆润饱满，Windows 默认字体可能显示为黑白线框，Android 各厂商也不统一。SVG 更可控，但体积大、维护成本高。
- 若只要快速上线且目标用户以 iOS / macOS 为主，直接用
content: "?"; - 若需跨平台一致（尤其企业内网或政企项目），改用 base64 编码的 SVG 图标，通过
background-image: url("data:image/svg+xml,...") - 别混用：不要在同一个
label::before里既设content又设background-image，后者会覆盖前者
点击没反应？检查这三处硬性限制
CSS 里看似简单的 input:checked ~ label 实际对 HTML 结构极其敏感。
-
input和label必须同级、同父容器，嵌套在div里再包一层就会失效 - HTML 中不能有注释节点或文本节点（比如换行缩进产生的空格）夹在
input和label之间 - 浏览器不支持
:checked伪类的老版本（如 IE11 及以下）会完全无响应，需单独加 JS fallback
emoji 字体大小和对齐怎么调才不突兀？
emoji 是内联字符，但行高、基线、宽高比和普通文字不一致，直接设 font-size 容易上下偏移或撑开行距。
- 优先用
line-height: 1+vertical-align: middle控制垂直居中 - 避免用
em单位调大小，改用px或rem（比如font-size: 32px）更稳定 - 如果和旁边文字混排，给
label加display: inline-flex; align-items: center;比纯文本方案更可靠
真正难的不是写出来，而是让 ? 在 Windows Chrome、iOS Safari、鸿蒙 Browser 上看起来大小一致、位置居中、点击区域准确——这些细节必须真机测试，不能只看开发机预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
