本文详解如何利用现代 css 的 :has() 伪类，精准控制 radio 星标评分组件中已选星和悬停星的颜色状态，替代传统复杂兄弟选择器，实现简洁、可维护的交互样式。
本文详解如何利用现代 css 的 :has() 伪类，精准控制 radio 星标评分组件中已选星和悬停星的颜色状态，替代传统复杂兄弟选择器，实现简洁、可维护的交互样式。
在基于 UIKit 的表单中将默认单选按钮替换为星标（★）时，核心挑战在于：如何让被选中的星标及其左侧所有星标统一变色（如红色），同时支持悬停高亮与半选态过渡效果？ 原有代码中 .uk-margin > label > div > input:checked, label 这类选择器存在逻辑错误——它试图同时匹配 input:checked 和任意 label，无法建立父子/兄弟关系，因此无法触发预期颜色变化。
现代解决方案依赖 CSS 新特性 :has()（目前主流浏览器Chrome 105+, Firefox 119+, Safari 15.4+ 已支持），它允许父容器根据其子元素状态进行条件样式匹配，彻底简化逻辑：
✅ 正确的样式逻辑解析
/* 隐藏原生 radio，保留语义与可访问性 */
.uk-margin > label > div > input {
position: absolute;
top: -9999px;
opacity: 0; /* 比 visibility: hidden 更利于屏幕阅读器 */
}
/* 默认星标样式 */
.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:hover > label::before {
color: #deb217;
}
/* 关键！当选中任一 radio 时，所有星标前缀统一设为红色 */
.uk-margin:has(:checked) > label::before {
color: #ff0000;
}
/* 进阶：选中某星后，该星及左侧所有星保持红色，右侧星为橙黄色（模拟“半选”视觉反馈） */
.uk-margin:has(:checked) > label:has(:checked) ~ label::before {
color: #c59b08;
}
⚠️ 注意事项：
:has()必须作用于包含<input>的最近共同父容器（此处为.uk-margin），而非<label></label>自身；:has(:checked)匹配的是 任意一个 被选中的 radio，因此无需为每个 star 单独写规则；label:has(:checked) ~ label利用相邻兄弟选择器，精准定位“已选星之后的所有星”，实现右侧星降级着色；- 推荐使用
display: flex替代float（如示例中.uk-margin { display: flex; }），确保布局稳定且无需清除浮动。
✅ 完整 HTML 结构（无需修改）
<div class="uk-margin" data-id="page#18">
<fieldset data-yooessentials-form-field="tempi">
<div class="uk-form-controls">
<div class="uk-grid-small uk-child-width-auto uk-grid" uk-grid>
<label class="uk-flex uk-margin-right">
<div><input type="radio" name="tempi" value="1"></div>
<span class="uk-margin-small-left">1</span>
</label>
<label class="uk-flex uk-margin-right">
<div><input type="radio" name="tempi" value="2"></div>
<span class="uk-margin-small-left">2</span>
</label>
<!-- ... 其余 star 标签同理 -->
</div>
</div>
</fieldset>
</div>
此方案摒弃了冗长的 +, ~, :checked + label, :checked ~ label 等易出错的链式选择器，以语义清晰、层级扁平的 :has() 实现状态驱动样式，大幅提升可读性与可维护性。如需兼容旧版浏览器，可结合 JavaScript 监听 change 事件动态添加 .checked 类作为降级方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
