按钮分段控制的本质是使用语义化且可访问的 input[type="radio"] + label 组合，通过 :checked 伪类配合相邻兄弟选择器实现样式切换，确保键盘操作、屏幕阅读器支持及表单正确提交。
按钮分段控制的本质是 input[type="radio"] + label 配合 CSS 伪类
纯 HTML 实现分段按钮（如“日/周/月”切换），关键不是用 button，而是用一组互斥的 input[type="radio"]，再用 label 关联它们——这样既能保证单选语义和可访问性，又方便用 :checked 控制样式。浏览器原生 radio 默认隐藏，所以必须用 label 承载视觉按钮，且每个 label 的 for 属性要精确匹配对应 radio 的 id。
常见错误：直接给多个 button 加点击事件模拟单选，结果无法被键盘操作（Tab 切换、空格选中）、不被屏幕阅读器识别、表单提交时无值。
- 所有
input[type="radio"]必须有相同的name值，否则无法互斥 -
label和input必须一一对应，for和id拼写大小写敏感 - 不要用
display: none隐藏 radio，推荐用position: absolute; opacity: 0; width: 1px; height: 1px;保留可访问性
用 :checked + label 实现选中态高亮
CSS 里不能写 input:checked label（因为 label 不是 input 的子元素），正确路径是让 input 和 label 同级，然后用相邻兄弟选择器 +：
<input type="radio" name="period" id="day"><label for="day">日</label> <input type="radio" name="period" id="week"><label for="week">周</label>
对应样式：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
input[type="radio"] { /* 隐藏但可访问 */ }
input[type="radio"]:checked + label {
background-color: #007bff;
color: white;
}
label {
display: inline-block;
padding: 6px 12px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
- 如果 label 在 input 前面，得用
:has()（但 Safari 15.4+ 才稳定支持，生产环境慎用） -
label上别加onclick或preventDefault，会破坏原生行为 - 选中态样式建议同时改
background-color、color和border-color，避免色弱用户辨识困难
禁用状态和默认选中必须同步到 input 元素
禁用整组按钮，应该给每个 input 加 disabled，而不是只禁用 label；默认选中用 checked 属性，不是靠 JS 设置。否则表单重置（form.reset()）或服务端渲染时状态会错乱。
-
<input type="radio" name="period" id="month" checked disabled>是合法组合 - 禁用后，
label的cursor应设为not-allowed，且灰色文字需满足 WCAG 对比度要求（至少 4.5:1） - 不要用
label[disabled]这种写法——label本身没有disabled属性
移动端点击区域小？用 label 的 padding 和 min-width 解决
在手机上，手指点不准 tiny 的 radio，但 label 天然扩大了点击热区。只要确保 label 覆盖整个按钮区域，并设置足够内边距：
label {
min-width: 60px;
text-align: center;
padding: 8px 16px;
}
- 避免只靠
font-size放大文字来撑开点击区，会导致布局跳动 - 如果按钮横向排列拥挤，用
flex布局并设gap，别用margin——后者在 IE 中不生效 - 真机测试时重点看 iOS Safari 下
:checked + label是否能即时响应，某些旧版存在微小延迟
实际项目里最容易漏的是可访问性属性：比如没加 aria-label 或 title，或者 radio 缺少 name 导致表单序列化失败。样式可以炫酷，但语义和基础交互必须先跑通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
