如何使用 CSS :has() 实现点击星标后动态着色

本文详解如何利用现代 CSS 的 :has() 伪类选择器，为基于 radio input 的星评组件实现精准的选中态颜色控制，替代传统复杂兄弟选择器逻辑，提升可维护性与语义清晰度。

本文详解如何利用现代 CSS 的 :has() 伪类选择器，为基于 radio input 的星评组件实现精准的选中态颜色控制，替代传统复杂兄弟选择器逻辑，提升可维护性与语义清晰度。

在构建用户评分交互（如 1–5 星评价）时，常需将原生 <input type="radio"> 隐藏，并用 Unicode 星号（★）视觉替代。核心挑战在于：如何让被选中的星及其左侧所有星统一变色（如红色），同时支持悬停高亮（如金色）？ 传统方案依赖大量 ~ 兄弟选择器和冗余状态组合，易出错且难以维护。现代解法——CSS :has() 提供了简洁、语义化、层级清晰的解决方案。

✅ 关键原理：:has() 实现父容器状态感知

:has() 允许父元素根据其子元素状态（如 :checked）应用样式。本例中，.uk-margin 作为包裹所有 label 的容器，通过 .uk-margin:has(:checked) 即可统一响应任意 radio 被选中的事件，无需为每个 star 单独编写规则。

? 样式实现要点（精简版）

* {margin: 0;padding: 0;}.uk-margin {height: 46px;padding: 0 10px;display: flex; /* 替代 float，布局更稳定 */}/* 隐藏原生 radio，保留可访问性 */.uk-margin > label > div > input {position: absolute;top: -9999px; /* 旧写法兼容性更好 */opacity: 0;/* 双重隐藏，确保不可见 */}.uk-margin > label {width: 1em;white-space: nowrap;cursor: pointer;font-size: 30px;color: #ccc; /* 默认灰色星 */}/* 插入星号 */.uk-margin > label::before {content: '★ ';}/* 悬停效果：当前星及右侧星变亮黄 */.uk-margin > label:hover,.uk-margin > label:hover ~ label {color: #deb217;}/* 悬停时星号本身着色（避免文字/星号颜色不一致） */.uk-margin > label:hover::before,.uk-margin > label:hover ~ label::before {color: #deb217;}/* 已选中状态：所有星号统一为红色 */.uk-margin:has(:checked) > label::before {color: #ff0000;}/* 选中某星后，其右侧星（即更高分）显示强调色（如深金） */.uk-margin:has(:checked) > label:has(:checked) ~ label::before {color: #c59b08;}

注意事项：

1. :has() 在 Chrome 105+、Firefox 119+、Safari 15.4+ 中已原生支持；若需兼容旧版浏览器（如 IE 或早期 Edge），需引入 PostCSS plugin 进行转换。
2. label 必须正确包裹 input（即使结构嵌套较深），否则 :has(:checked) 无法匹配。本例中 <label><div><input></div>...</label> 结构完全符合要求。
3. 使用 display: flex 替代 float，避免浮动清除问题，同时保证星号严格左对齐、顺序稳定。

? 最佳实践建议

1. 无障碍友好：隐藏 radio 时务必保留 opacity: 0 + position: absolute 组合，而非 display: none 或 visibility: hidden，确保屏幕阅读器仍可识别控件。
2. 语义增强：为 <label> 添加 aria-label（如 aria-label="评分 3 星"）可进一步提升可访问性。
3. 扩展性设计：该方案天然支持任意数量星标（只需增减 label），无需修改 CSS 规则。

通过 :has()，我们以声明式方式表达了「当存在已选 radio 时，所有星号着色」这一业务逻辑，代码更短、意图更明、维护成本更低——这是现代 CSS 赋予交互组件的优雅答案。