optgroup仅提供语义分组，不支持修饰；label必须非空且符合认知习惯（如“华东”），css仅支持font-weight、color等基础样式，ios safari不显示label，关键信息须置于option文本开头。
optgroup 本身不能“修饰”分类，它只提供语义分组；所谓“修饰”，实际是靠 label 文本设计 + 极有限的 CSS + 键盘行为配合实现的视觉与交互引导，不是样式美化工具。
label 值怎么写才真正起作用
分组标题能不能被用户感知，90%取决于 label 是否有效且符合认知习惯：
- 必须非空且
.trim()后长度 > 0，label=""或label=" "会导致整组静默失效（option 还在，但无标题、无语义、屏幕阅读器不读） - 中文 label 控制在 2–4 字，如
label="华东"、label="热销款"；避免label="其他未归类项"这类模糊表述 - 不要写 HTML 标签，
label="<strong>水果</strong>"会原样输出文字，不是加粗效果 - 国际化项目中，
label必须由服务端变量或 JS 动态注入，硬编码中文会卡死本地化流程
CSS 能调什么、不能调什么
浏览器对 optgroup 的样式支持极弱，很多常见操作会白忙一场：
- 安全可用：
font-weight、color、margin-top（用于拉开组间距） - 基本无效：
background、padding、border、display: none（隐藏后破坏可访问性）、optgroup::before（伪元素不生效） - iOS Safari 原生选择器几乎忽略所有样式，只保留默认灰字加粗，所以别指望靠 CSS 实现“高亮”或“图标前缀”
- 真要视觉强化？用
option[data-group="华东"]打标 + JS 配合，比硬改optgroup更可控
超长列表里怎么让分组真正提升筛选效率
分组不是堆砌标签，而是服务于键盘跳转和快速定位：
- 每个
option的文本必须以关键词开头，比如写<option>浙江杭州</option>，而不是<option>杭州（浙江）</option>——否则按 “zhe” 键无法命中 - 同一
optgroup内的option按字母或业务逻辑顺序排列，避免上下键来回折返 - 别给
optgroup加disabled：它会让选项变灰，但 label 仍可见，容易误判为“还能点”；真要禁用一组，得遍历其children给每个option加disabled - 超过 50 个选项时，
optgroup已经撑不住了——该换Choices.js或带搜索的组件，别硬塞 12 个分组
最容易被忽略的是：iOS Safari 不渲染 optgroup 的 label，只显示 option。所以所有关键信息（比如城市名、型号名）必须出现在 option 文本开头，不能只靠 label 传达。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
