optgroup 的 label 属性必须非空且有效，否则分组标题不显示；label 值为纯空格或缺失时浏览器跳过渲染，需用业务化短文本并转义特殊字符。
label 属性不填或为空，分组标题根本不会显示——这是 90% 的人第一次用 optgroup 就失效的直接原因。
为什么 optgroup 的 label 必须非空
浏览器只靠 label 属性渲染分组标题，它不是可选配置，而是唯一触发渲染的开关。没这个属性，optgroup 在 DOM 中存在，但视觉上完全不可见，屏幕阅读器也读不出任何内容。
-
label=""或label=" "（纯空格）：Chrome/Firefox 直接跳过该分组；Safari 可能留一行空白，造成错位 -
<optgroup><option>xxx</option></optgroup>：没有label，整组静默失效，控制台无报错 -
label值会被当纯文本处理，写label="<strong>水果</strong>"会原样显示“<strong>水果</strong>”，不解析 HTML
label 的值怎么写才真正可用
它不只是“能显示”，还要让用户一眼看懂归属、方便键盘导航、适配屏幕阅读器。模糊或机械命名反而增加认知负担。
- 用具体业务词，比如
label="一线城市"、label="国产车型"，别用label="group1"或label="其他" - 长度控制在 2–6 个汉字或英文单词，太长在移动端会被截断，且影响语音朗读节奏
- 国际化项目中，
label必须由 JS 动态注入或服务端模板变量生成，硬编码中文会卡死本地化流程 - 避免特殊字符如
<、>、"，必须转义为等实体，否则破坏 HTML 结构
label 渲染后为什么看起来没变化
原生 optgroup 的样式能力极弱，浏览器默认只给 label 加灰色和轻微缩进，几乎无法通过 CSS 改变字体大小、背景或 hover 效果。你看到“没变化”，其实是浏览器本就如此。
-
optgroup { color: #666; font-weight: bold; }在 Chrome/Firefox 有效，但 Safari 某些版本会忽略font-weight -
optgroup { margin-top: 0.5em; }是最实用的微调：原生分组间无间距，加这个才能看出“分开了” - 不要给
optgroup设cursor: pointer或background——99% 的浏览器会无视 - 若需图标、悬停高亮、折叠展开等交互，说明已超出
optgroup能力边界，该换 JS 模拟下拉了
label 和 disabled 共存时的真实行为
disabled 加在 optgroup 上，禁用的是内部所有 option，但 label 依然清晰可见——这不是 bug，是规范行为。很多人误以为“标题还在 = 没禁用成功”，其实恰恰相反。
-
<optgroup label="待上线" disabled><option value="v2">新后台</option></optgroup>：标题“待上线”可见，选项灰显不可点 -
option可单独设disabled，与optgroup的disabled不冲突，优先级独立 - 移动端（尤其 iOS Safari）对
disabled的视觉反馈较弱，建议加 CSS 辅助：optgroup[disabled] { opacity: 0.7; } - 禁用的
optgroup仍参与键盘导航（Tab 键会跳过整个组），但屏幕阅读器仍会读出label内容，所以文案要准确，不能误导
真正难的不是写对 label，而是判断哪些选项值得分组、分几组、每组 label 用什么措辞——这需要结合用户场景反复测试，而不是套个标签就完事。
