必须嵌套在内且仅包裹，label属性必需且仅支持纯文本，disabled禁用整组选项但不隐藏标题，css样式支持极弱。
<optgroup></optgroup> 标签本身不会报错，但一旦用错位置或嵌套不当，浏览器会直接忽略它——你看到的“分组没生效”，大概率是 <optgroup></optgroup> 被塞进了错误的父元素，或者里面混了不允许的子元素。
必须放在 <select></select> 内部，且只能直接包裹 <option></option>
这是最常踩的坑：<optgroup></optgroup> 不是独立组件，它没有渲染能力，纯粹是语义容器。它的合法父元素只有 <select></select>，合法子元素只有 <option></option>（不能放 <div>、<code><span></span>，甚至不能放另一个 <optgroup></optgroup>）。
- ✅ 正确写法：
<select><optgroup label="前端"> <option value="html">HTML</option> <option value="css">CSS</option> </optgroup> <optgroup label="后端"><option value="python">Python</option></optgroup></select>
- ❌ 错误写法：
<optgroup></optgroup>套在<div> 里、放在 <code><select></select>外、或内部写了<option></option>以外的内容（比如注释或空格文本节点过多时，部分旧版 Safari 会出问题）label属性不可省略，且不能含 HTML 实体或换行没有
label的<optgroup></optgroup>会被浏览器静默丢弃——你什么也看不到，控制台也不会报错。-
label必须是纯字符串，不支持<br>；想换行？做不到，浏览器会把换行符转为空格显示 - 中文、英文、数字都 OK，但避免使用引号、尖括号等可能干扰解析的字符（虽然现代浏览器大多能容错）
- 如果动态生成，注意提前 trim 空格：例如
label={group.name.trim()}，否则可能显示为 “前端 ”（带空格），影响可读性
禁用整个分组：用
disabled属性，但别指望子项继承给
<optgroup></optgroup>加disabled，会让整组<option></option>变灰且不可选——这很实用，但要注意行为边界：- ✅
<optgroup disabled label="已下线"><option value="v1">1.0</option></optgroup>：该组所有选项禁用 - ⚠️ 子
<option></option>单独设disabled仍有效，但若父<optgroup></optgroup>已禁用，再单独启用某个<option></option>是无效的（浏览器忽略） - ⚠️
<optgroup disabled></optgroup>不会阻止 JS 修改其子项的disabled属性，但 DOM 渲染上依然不可交互
样式限制多，想自定义得绕开原生逻辑
浏览器对
<optgroup></optgroup>的 CSS 支持极弱：color、font-weight在多数浏览器中有效，但background、padding、border基本无效；更别说 hover 或 focus 状态了。- Chrome / Edge：支持
color和font-weight，但background-color仅在部分版本中对 label 文字起微弱作用 - Firefox：label 默认加粗，但几乎不响应任何 background 或尺寸类样式
- Safari：label 无法设置颜色，
color属性被忽略 - 真要深度定制？放弃原生
<optgroup></optgroup>，用<div> + <code>aria-haspopup模拟下拉，或引入轻量库如choices.js——原生分组只适合基础语义和无障碍需求真正麻烦的不是怎么写对，而是当它“看起来没效果”时，你得立刻想到：是不是
<optgroup></optgroup>不在<select></select>直接子级？有没有漏掉label？有没有在它里面塞了不该有的标签？这些地方一错，浏览器就默默吞掉，连 warning 都不给。
-
