本文介绍如何构建一个纯前端的五星评分组件：点击任意星星即可跳转至对应评分链接，同时支持悬停时高亮当前星及左侧所有星星，无需 javascript 即可实现交互效果。
本文介绍如何构建一个纯前端的五星评分组件：点击任意星星即可跳转至对应评分链接，同时支持悬停时高亮当前星及左侧所有星星，无需 javascript 即可实现交互效果。
要实现一个既可点击跳转、又支持“悬停即高亮当前星及左侧所有星”的五星评分系统，关键在于语义结构合理化 + CSS 选择器精准控制。原始代码中将 <a> 标签嵌套在 <div class="star"> 内部，但未赋予其可点击区域（::before 伪元素挂载在父容器上，而 <a> 本身无宽高），导致点击无效；同时嵌套结构引发 :hover 层叠干扰，使悬停样式无法按预期作用于“左侧连续星星”。
✅ 正确结构：扁平化 DOM + 伪元素挂载到 <a> 上
首先，修正 HTML 结构为同级并列（避免深层嵌套），每个 <a> 独立包裹一颗星，语义清晰且便于样式控制：
<div class="star-rating"> <a href="/rate?r=1" class="star">★</a> <a href="/rate?r=2" class="star">★</a> <a href="/rate?r=3" class="star">★</a> <a href="/rate?r=4" class="star">★</a> <a href="/rate?r=5" class="star">★</a> </div>
? 说明：直接使用 ★ 字符替代 ::before，更简洁可靠；若需字体图标或 SVG，也可保留伪元素，但必须绑定在 <a> 上。
Wechat Article Html下载将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
✅ 核心 CSS：精准控制悬停与状态
.star-rating {
display: flex;
gap: 4px; /* 星星间距 */
direction: ltr; /* 确保从左到右顺序 */
}
.star {
color: #ccc;
text-decoration: none;
font-size: 1.5rem;
transition: color 0.2s ease;
}
/* 悬停时：当前星及其左侧所有星变黄 */
.star:hover,
.star:hover ~ .star {
color: #ffcc00;
}
/* 可选：点击后反馈（如访问过） */
.star:visited {
color: #ff9900;
}⚠️ 注意：~ 是通用兄弟选择器，配合 :hover 可自然实现“悬停第 n 颗星 → 前 n 颗均高亮”，这是纯 CSS 实现“左侧连带高亮”的核心技巧。
立即学习“前端免费学习笔记（深入）”；
✅ 进阶优化（可选）
- 响应式适配：为 .star 添加 font-size: clamp(1rem, 4vw, 1.8rem); 保证不同屏幕下大小协调；
- 无障碍增强：为每个 <a> 添加 aria-label="评分 1 星"，提升可访问性；
- 禁用默认下划线：确保 text-decoration: none 已全局应用，避免视觉干扰。
❌ 常见误区提醒
- 不要嵌套 <div class="star"> 包裹 <a>，会导致 :hover 作用域错乱和点击热区丢失；
- 避免使用 float: right 布局，改用 display: flex 更可控、更现代；
- ::before 若必须使用，请务必写成 .star a::before 并设置 display: inline-block 和足够尺寸，否则点击区域仍为空。
最终效果：用户鼠标移至第三颗星时，第一、二、三颗星同步变为金色；点击任一星，立即跳转至对应 /rate?r=N 地址，完整满足评分跳转双重需求——简洁、高效、零 JS 依赖。
