label属性无法被CSS深度定制，仅color等少数可继承文本属性部分生效，iOS Safari甚至不显示label文字，实现精美样式必须放弃原生optgroup改用JS模拟或服务端预处理。
label属性本身不能被CSS深度定制
浏览器对<optgroup>的样式支持极其有限，label属性渲染出的文字只是原生控件的一部分，并非独立文本节点。你无法用 CSS 设置它的background-color、padding、height、伪元素（如::before），甚至font-weight在部分浏览器中也不生效。所有主流浏览器（Chrome/Firefox/Safari/Edge）都遵循这一限制，不是 bug，而是规范行为。
常见徒劳尝试包括：
- 给
<optgroup>加class再写.group-label { background: #eee; }→ 完全无效 - 用
optgroup::after { content: "▶"; }添加图标 → 不触发渲染 -
optgroup { display: block; margin: 10px 0; }→ 大部分属性被忽略
能安全使用的CSS仅限于少数可继承属性
真正跨浏览器可用的样式操作非常克制，仅限于几个可继承的文本类属性，且效果因浏览器而异：
-
color：多数浏览器支持（如设为#666让标题更灰） -
font-style：可设为italic，但语义上不推荐 -
font-size：部分浏览器响应（如 Chrome 允许略调小，Safari 常忽略） -
margin-top：极少数场景下能拉开分组间距，但不可靠，iOS Safari 几乎无视
示例（仅作参考，勿强求一致）：
立即学习“前端免费学习笔记（深入）”；
select optgroup {
color: #777;
font-size: 0.95em;
}
想实现“精美样式”，必须放弃原生optgroup
如果你需要图标、悬停高亮、背景色、缩进、二级折叠等效果，<optgroup>不是合适工具。它只负责语义分组和基础可访问性，不是 UI 组件。
- JS 模拟方案：用
<div>+<ul>重构下拉，配合aria-labelledby和role="group"保持可访问性（如 Choices.js、Tom Select） - 服务端预生成带前缀的
<option>：比如<option value="sh">● 上海</option>，用符号模拟层级（兼容性最强） - 禁用移动端原生选择器：iOS Safari 根本不显示
label文字，所以任何依赖<optgroup>视觉呈现的设计，在 iPhone 上默认失效
真正容易被忽略的点
很多人花几小时调<optgroup>的样式，最后发现 iOS 用户根本看不到分组标题——这不是你代码写错了，是 Safari 的设计决定。更隐蔽的问题是：label值为空格或未.trim()时，整个分组静默消失，DOM 里还存在，但用户和屏幕阅读器都感知不到。这类问题在线上环境极难复现，却会直接导致分类逻辑断裂。
