optgroup仅支持单层语义分组，不支持多级嵌套；所谓“多级”只能通过单层optgroup配合option文本缩进或Unicode符号模拟，且需确保关键信息位于option文本开头以兼容Safari。
optgroup 不支持多级嵌套，所谓“多级”只能靠单层语义+视觉模拟
HTML 原生 严格禁止嵌套——写 会被浏览器直接忽略，不会渲染出二级标题，也不会报错。所谓“多级分类”，实际只有两种可行路径：要么放弃原生，用 JS 插件实现真树形；要么在单层 下，用 option 文本 + CSS 缩进模拟层级。
- 推荐做法：把“华东 → 上海/杭州/南京”拆成
，内部写成，用 Unicode 符号或空格制造缩进感 - 禁用做法：试图给
加class或id后用 JS 动态插入子分组——DOM 中根本不存在可操作的节点，JS 拿不到该元素 - 注意 Safari 和 iOS 原生
会完全不显示的 label，只渲染，所以“模拟层级”必须保证所有关键信息（如城市名）仍出现在文本开头
label 属性缺失或为空时，optgroup 静默失效
的 label 不是可选属性。漏写 label="..." 或写成 label=""，浏览器就当它不存在——里面的 仍会显示，但失去分组语义，屏幕阅读器不播报，键盘导航也不跳过分组间隙。
- 服务端模板中常见错误：
{% if group %}{% endif %}，但group.name为空字符串，导致生成 -
label值不能含 HTML 标签，label="水果"会原样显示为文字 “水果”，不是加粗效果 - 动态插入时，必须先赋值再添加：
const optgroup = document.createElement('optgroup'); optgroup.label = '国产车型'; select.add(optgroup);—— 顺序颠倒或漏赋值，分组就不会出现
disabled 属性作用对象是 option，不是 optgroup 标题
给 加 disabled，效果是让整组 变灰不可选，但 label 文本依然可见、不可点击、也不参与表单提交。这不是 bug，是规范行为。很多人误以为“标题还在=没禁用”，其实禁用已生效。
- 想彻底隐藏某组？只能用 JS 移除整个
节点，或服务端条件判断不输出该标签 - 禁用单个选项，直接给
加属性即可，无需动 - Safari 对
支持不稳定，部分版本下标题仍可被键盘焦点停驻，建议配合 JS 检查权限后动态移除节点更可靠
样式定制空间小，伪元素和 class 大概率无效
浏览器对 的 CSS 支持极有限。optgroup { font-weight: bold; background: #f9f9f9; } 在 Chrome/Firefox 有效，但在 Safari 和 iOS 上可能完全不生效；optgroup::before 这类伪元素一律无效，因为 不是渲染盒（rendering box），没有自己的布局上下文。
- 安全做法：只用
optgroup元素选择器控制字体、边距等基础样式，避免依赖背景色或圆角 - 想高亮某组？不如给对应
加data-group="华东"，再用 CSS 选择器option[data-group="华东"]定制 - 真正需要精细样式或搜索过滤，应换用 Select2、Choices.js 等插件——但要权衡体积、无障碍兼容性和维护成本
原生 的能力边界很清晰：它只做一件事——提供单层语义分组。任何超出这个范围的需求（比如折叠展开、二级菜单、搜索高亮），都意味着你已经脱离了原生控件的设计意图，该考虑是否真的需要它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
