纯css实现移动端分段插件必须使用radio+label结构，因其天然支持单选、可访问性及触控响应；checkbox或div方案在真机、焦点管理与屏幕阅读器下均不可靠。
移动端分段插件（Segment Control）用纯 CSS 实现是完全可行的，但必须依赖 <input type="radio"> + label 的隐式绑定机制——这是唯一不写 JS 就能保证状态同步、可访问性与点击响应的方法。任何试图用 checkbox 或纯 div + :hover 的方案，在真机触控、焦点管理或屏幕阅读器下都会出问题。
为什么必须用 radio 而不是 checkbox 或 div
分段控件本质是单选行为，radio 天然支持同一 name 组内互斥；checkbox 需额外逻辑防多选，且无法用 :checked 精确控制“仅一个激活”；纯 div 无法触发表单状态变化，也无法被键盘 Tab 导航或 Space 切换。
-
radio元素默认不可见，靠label的for或包裹关系绑定，点击 label 即触发对应 radio 的 checked 状态 - 所有样式切换必须基于
input:checked + label或input:checked ~ label的兄弟/后续兄弟选择器 - 不能用
:focus-within模拟状态，它不反映真实选中逻辑，且 iOS Safari 对该伪类支持不稳定
label 的定位与尺寸必须严格匹配触控热区
移动端最小触控建议尺寸为 44×44px，但很多开发者只设了文字行高，导致边缘点击失效。关键不是“看起来像按钮”，而是“点哪都算点中”。
- 给
label设置display: block或inline-block，并显式定义min-height: 44px和padding（比如padding: 0 16px） - 避免用
margin扩展可点区域——它不参与事件命中检测；必须用padding或width/height - 若用 flex 布局排布多个 segment，确保
label宽度均分且无间隙：flex: 1+text-align: center，不要依赖justify-content: space-between留白
激活态样式只能通过 input:checked + label 触发
不能靠 JS 添加 class，也不能用 :active 临时态替代——它只在按压瞬间生效，松手即消失，无法维持视觉反馈。
- 基础结构必须是：
input[type="radio"]在前，紧邻其后的label，且input不 display:none（否则 iOS Safari 会跳过可访问性树） - 推荐写法：
input { position: absolute; opacity: 0; width: 1px; height: 1px; }—— 既隐藏又保留在可访问性流中 - 激活样式示例：
input:checked + label { background-color: #007aff; color: white; }，禁用态则用input:disabled + label { opacity: 0.5; } - 圆角处理要统一：第一个 label 左圆角、最后一个右圆角，中间 label 无圆角；可用
label:first-of-type和label:last-of-type精确控制
真正难的不是画出那个带圆角的条状控件，而是让每一次点击都可靠地改变表单值、被屏幕阅读器播报、在微信内置浏览器里不闪退、在 iOS 上支持双击缩放时不意外触发——这些全系于 radio + label 的结构是否干净，以及 CSS 选择器是否足够健壮。别为了省几行 JS 去动结构，那只会把问题拖到 QA 阶段才爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
