必须嵌在内且label非空，否则被忽略；空提示项须为首子元素；其无value、不可样式化、移动端常隐藏标题。
直接用 <optgroup></optgroup> 就能分组，但必须嵌在 <select></select> 里，且每个 <optgroup></optgroup> 必须带 label 属性——缺了它，分组标题不显示，甚至整个标签被浏览器忽略。
为什么 <optgroup></optgroup> 必须放在 <select></select> 内部？
因为 <optgroup></optgroup> 不是独立控件，它只是语义化分组容器。浏览器只认 <select></select> 的直接子节点为有效内容；如果把它写在 <select></select> 外面，或套在 <div>、<code><span></span> 里，Chrome/Firefox 会直接跳过渲染，Safari 可能报解析警告。常见错误写法：
-
<div><optgroup label="水果"><option value="apple">苹果</option></optgroup></div>→ 无效，被忽略 -
<select><optgroup label="水果"><div><option value="apple">苹果</option></div></optgroup></select>→<optgroup></optgroup>内只能有<option></option>，不能有其他标签
<optgroup label=""></optgroup> 为什么没显示标题？
label 属性值为空字符串、全空白符（如空格、换行），或只含 HTML 实体（如 ），多数浏览器（Chrome/Firefox）会跳过分组渲染，Safari 可能留个空行但不可点。这不是 bug，是规范行为。
- 正确写法：
<optgroup label="操作系统"></optgroup> - 错误写法：
<optgroup label=""></optgroup>、<optgroup label=" "></optgroup>、<optgroup label=" "></optgroup> - 国际化场景下，
label应由 JS 或服务端动态注入，别硬编码中文/英文混排
怎么让“请选择…”提示项不被埋进某个分组里？
空提示项（如 <option value="" disabled selected>-- 请选择 --</option>）必须作为 <select></select> 的第一个子元素，**不能放进任何 <optgroup></optgroup> 中**。否则用户点开下拉框时，默认折叠状态会让它藏在分组后面，首次看不到。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 正确结构：
<select><option value="" disabled selected>-- 请选择 --</option> <optgroup label="水果"><option value="apple">苹果</option></optgroup></select> - ❌ 错误结构：
<select><optgroup label="请选择"><option value="" disabled selected>-- 请选择 --</option></optgroup></select>→ 分组标题变成“请选择”，且空选项无法默认聚焦 - 注意：
<optgroup></optgroup>自身没有value，也不参与表单提交；选中项的value始终来自<option></option>，跟它在哪组无关
移动端和样式控制有哪些实际限制？
所有现代浏览器都支持 <optgroup></optgroup>，但样式能力极弱：你不能给它设 padding、background-color、font-size，color 只能调灰度（深灰/浅灰），font-weight 在 Safari 上基本无效。更关键的是：
- CSS 中没有
optgroup::before这类伪元素，加图标、符号必须靠 JS 模拟下拉（如 Choices.js） - 移动端（尤其 iOS Safari）常隐藏
label文字，只保留选项列表，这是系统级限制，不是代码问题 - 键盘导航（Tab + 方向键）会自动跳过分组标题，直接落到可选项上——这是无障碍友好设计，别当成 bug 去“修复”
真正容易被忽略的是：DOM 中 select.children 包含 <optgroup></optgroup> 节点，但 select.options 只返回 <option></option> 元素。想查当前选中项属于哪个分组，得用 select.selectedOptions[0].parentNode，但要先判断 parentNode 是不是 <select></select>（无分组时）。
