optgroup的label无法用css改颜色或加粗，因其被浏览器视为原生控件非文本节点，color、font-weight等在safari和旧edge中被忽略；仅font-size、font-family、text-align、opacity部分生效，深度定制需改用js下拉库或自定义dom。
optgroup的label为什么不能用CSS改颜色或加粗
浏览器把<optgroup></optgroup>的label当成原生控件的一部分，不是普通文本节点，所以color、font-weight在部分浏览器（尤其是 Safari 和旧版 Edge）里会被忽略，background、padding、border基本无效。这不是你写错了，是规范限制——它压根没暴露这些样式接口。
哪些CSS属性实际能生效
实测下来，只有少数属性有跨浏览器一致性：
-
font-size：Chrome/Firefox/Edge 都支持，Safari 也认 -
font-family：可换字体，但要注意 fallback 字体链 -
text-align：仅对 label 文字本身有效（注意：它不占满整行，居中效果有限） -
opacity：能整体变淡，但别指望做 hover 效果（:hover不触发）
别试 line-height 或 letter-spacing，它们在 Safari 中常被无视；也别给 <optgroup></optgroup> 加 class 后写 .group-label { color: red; }——类名存在，但样式不落地。
想真正自定义label外观，只能放弃原生
如果需求是图标+文字、深色背景、悬停高亮、或者多级缩进，<optgroup></optgroup> 原生能力撑不住。这时候必须换方案：
- 用
Select2、Choices.js或TomSelect这类 JS 下拉库，它们把整个下拉渲染成<div> + <code><ul></ul>，label 变成普通 DOM 节点，随便你加 class、伪元素、事件 - 自己手写
<div> 模拟下拉时，把分组标题做成带 <code>data-group="华东"的<h3></h3>标签，完全可控 - 若只是微调可读性（比如让 label 更醒目），可用
font-size: 1.1em+font-weight: 600组合，在 Chrome/Firefox 中凑合可用，但得接受 Safari 里 font-weight 失效 - 没在
appendChild()或add()之前设optgroup.label = "地区"—— label 为空，整个分组被浏览器跳过，自然没样式可谈 - 用了
select.appendChild(optgroup)而不是select.add(optgroup)，Chrome 直接抛错，DOM 根本没插入 - 服务端模板输出时，
label="{{ group.name }}"里group.name是空字符串或纯空格，生成了<optgroup label=""></optgroup>，等同于没写标签
动态插入时label样式失效的常见原因
JS 创建 <optgroup></optgroup> 后发现样式没 applied，大概率是这三件事漏了：
label 渲染失败从来不会报错，它只是静默消失——检查 DOM 里有没有那个 <optgroup></optgroup> 节点，比调样式更优先。
