本文详解如何利用现代 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;
}
⚠️ 注意事项：
:has()在 Chrome 105+、Firefox 119+、Safari 15.4+ 中已原生支持；若需兼容旧版浏览器（如 IE 或早期 Edge），需引入 PostCSS plugin 进行转换。label必须正确包裹input（即使结构嵌套较深），否则:has(:checked)无法匹配。本例中<label><div><input></div>...</label>结构完全符合要求。- 使用
display: flex替代float，避免浮动清除问题，同时保证星号严格左对齐、顺序稳定。
? 最佳实践建议
-
无障碍友好：隐藏 radio 时务必保留
opacity: 0+position: absolute组合，而非display: none或visibility: hidden，确保屏幕阅读器仍可识别控件。 -
语义增强：为
<label></label>添加aria-label（如aria-label="评分 3 星"）可进一步提升可访问性。 - 扩展性设计：该方案天然支持任意数量星标（只需增减 label），无需修改 CSS 规则。
通过 :has()，我们以声明式方式表达了「当存在已选 radio 时，所有星号着色」这一业务逻辑，代码更短、意图更明、维护成本更低——这是现代 CSS 赋予交互组件的优雅答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
