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