optgroup 的 label 文字无法用 css 单独选中，因其非 dom 节点而是浏览器 ui 层装饰文本；修改样式只能通过模拟组件或间接视觉优化实现。
label文字无法用CSS单独选中，这是根本限制
optgroup 的 label 属性渲染出的文字不是 DOM 节点，而是浏览器 UI 层的装饰性文本。你写 <optgroup label="水果"></optgroup>，DOM 中查不到任何代表“水果”二字的元素——它没有对应的 <span></span> 或文本节点，因此 CSS 选择器（包括 optgroup::before、optgroup > *）全部无效。
常见错误尝试包括：
-
optgroup[label="水果"] { color: red; }→ 匹配的是optgroup元素本身，不影响 label 文字 -
optgroup label { font-weight: bold; }→label不是标签，语法非法 -
optgroup::marker或::webkit-optgroup-label→ 无标准支持，Chrome/Firefox/Safari 均不识别
想改分组标题样式？只能靠替换或模拟
真实可用的路径只有两条：
方案一：放弃原生
optgroup，用 JS +div+select模拟
把分组标题做成可样式化的<div class="group-title">水果</div>，选项用<option></option>并通过data-group关联；用 JS 控制展开/聚焦逻辑。好处是完全可控，坏处是需手动处理键盘导航、无障碍（ARIA）、表单提交等细节。-
方案二：用 CSS 间接影响视觉层次
虽然不能改 label 文字本身，但可以弱化或强化其上下文：-
optgroup { border-top: 1px solid #eee; padding-top: 4px; }→ 在分组前加线，提升结构感 -
optgroup:first-child { border-top: none; padding-top: 0; }→ 避免顶部多余留白 -
select { font-family: -apple-system, "Segoe UI", sans-serif; }→ 统一字体，让 label 和 option 看起来更协调
-
iOS 和 Safari 下 label 样式问题更无解
iOS 原生 select 弹层根本不渲染 optgroup 的 label —— 所有选项扁平排列，分组信息 100% 丢失。此时任何 CSS 都没意义，必须在业务层降级处理：
- 提前在选项文案里嵌入分组标识，例如：
<option value="iphone15">【手机】iPhone 15</option> - 或用
disabled选项伪造标题：<option disabled>── 水果 ──</option>（注意：这仍是 option，非语义化，屏幕阅读器会读出）
真正需要样式隔离时，别碰 optgroup label
如果你的场景要求「分组标题必须可配色、可缩放、可本地化、可响应式」，那 optgroup 就不是合适工具。它的设计目标只是提供轻量语义和基础可访问性，不是 UI 定制接口。强行用 hack 方式绕过限制，最终会在 Safari 兼容性、无障碍审查、移动端体验上持续踩坑。
最省心的做法：把分组逻辑提到组件层，用 <details></details> + <select></select> 组合，或直接上带搜索的多选下拉库（如 Choices.js、TomSelect），它们内部已处理好样式、键盘、焦点、屏幕阅读器等全部链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
