如何用纯 HTML 和 CSS 实现可点击跳转的五星评分系统

本文介绍如何构建一个纯前端的五星评分组件：点击任意星星即可跳转至对应评分链接，同时支持悬停时高亮当前星及左侧所有星星，无需 javascript 即可实现交互效果。

本文介绍如何构建一个纯前端的五星评分组件：点击任意星星即可跳转至对应评分链接，同时支持悬停时高亮当前星及左侧所有星星，无需 javascript 即可实现交互效果。

要实现一个既可点击跳转、又支持“悬停即高亮当前星及左侧所有星”的五星评分系统，关键在于语义结构合理化 + CSS 选择器精准控制。原始代码中将 <a> 标签嵌套在 <p class=”star”> 内部，但未赋予其可点击区域（::before 伪元素挂载在父容器上，而 <a> 本身无宽高），导致点击无效；同时嵌套结构引发 :hover 层叠干扰，使悬停样式无法按预期作用于“左侧连续星星”。

✅ 正确结构：扁平化 DOM + 伪元素挂载到 <a> 上

首先，修正 HTML 结构为同级并列（避免深层嵌套），每个 <a> 独立包裹一颗星，语义清晰且便于样式控制：

<p 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>
</p>

? 说明：直接使用 ★ 字符替代 ::before，更简洁可靠；若需字体图标或 SVG，也可保留伪元素，但必须绑定在 <a> 上。

✅ 核心 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 已全局应用，避免视觉干扰。

❌ 常见误区提醒

• 不要嵌套 <p class=”star”> 包裹 <a>，会导致 :hover 作用域错乱和点击热区丢失；
• 避免使用 float: right 布局，改用 display: flex 更可控、更现代；
• ::before 若必须使用，请务必写成 .star a::before 并设置 display: inline-block 和足够尺寸，否则点击区域仍为空。

最终效果：用户鼠标移至第三颗星时，第一、二、三颗星同步变为金色；点击任一星，立即跳转至对应 /rate?r=N 地址，完整满足评分跳转双重需求——简洁、高效、零 JS 依赖。