optgroup 的 css 支持极窄，仅 font-weight、color 和部分浏览器支持的 margin-top 可用；label 属性必填且不可为空或纯空格；disabled 使内部 option 禁用但 label 仍显示；ios safari 原生 select 不渲染 optgroup label，需靠 option 文本自带分类信息或改用 js 组件。
optgroup 的 CSS 支持范围极窄，别碰 background 和伪元素
浏览器对 optgroup 的样式控制能力非常有限，多数 CSS 属性根本不起作用。尤其在 iOS Safari 原生 <select></select> 中，background、padding、border、display 全部被忽略，::before 和 ::after 伪元素也完全无效。
安全可用的样式只有三类：
-
font-weight（加粗标题） -
color（改文字颜色） -
margin-top（仅部分浏览器支持，用于分组间留空）
示例写法：
optgroup { font-weight: bold; color: #666; margin-top: 0.5em; }。不要尝试 optgroup { background: #f5f5f5; }——它在绝大多数移动端上不会生效，且可能破坏可访问性。
label 为空或含空格时，分组直接消失
optgroup 的 label 属性不是可选的，它是唯一触发浏览器渲染分组标题的依据。漏写、写成 label="" 或 label=" "（纯空格），都会导致该 optgroup 静默失效：内部 option 仍显示，但标题不出现、屏幕阅读器不播报、键盘导航也不跳过分组间隙。
动态生成时容易踩坑：
- 服务端模板未判空：
{% if group.name %}<optgroup label="{{ group.name }}"></optgroup>{% endif %}→ 若group.name是空字符串，会输出<optgroup label=""></optgroup> - JS 中忘记赋值：
const og = document.createElement('optgroup'); select.appendChild(og);→ 没设og.label，分组不出现 - 没做
.trim()：og.label = data.groupName + ' '→ 尾随空格让 label 实际为空
disabled 属性加在 optgroup 上，选项禁用但标题可见
给 optgroup 加 disabled 属性，效果是让它内部所有 option 变灰且不可交互，但 label 文字依然清晰显示——这不是 bug，是规范行为。很多人误以为“标题还在 = 没禁用”，其实恰恰相反。
关键点：
-
<optgroup disabled label="已下线"><option value="v1">1.0</option></optgroup>→ 正确，整组禁用 -
<optgroup disabled label="已下线"><option value="v1" disabled>1.0</option></optgroup>→ 多余，option的disabled不影响已由optgroup控制的状态 - 若需彻底隐藏某组，不能靠
disabled，只能用 JS 移除整个optgroup节点，或服务端条件判断不输出该标签
iOS Safari 原生选择器根本不显示 optgroup label
这是最容易被忽略的兼容性陷阱：iOS 和 iPadOS 的原生 <select></select> 弹出层中，optgroup 的 label 完全不渲染，用户只看到扁平的 option 列表。这意味着，任何依赖 label 传达分类信息的设计，在 iPhone 上都失效。
应对策略只有两个：
- 确保每个
option的文本开头就包含关键分类词，例如写成<option>华东-上海</option>，而不是<option>上海</option>后指望用户看上面的 “华东” 标题 - 如果业务强依赖多级分类或视觉分组，应放弃原生
<select></select>，改用Choices.js、Select2等 JS 组件，它们能模拟分组并在移动端保持一致表现
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
