如何用CSS隐藏不含未禁用option元素的optgroup标签

我想要隐藏不包含任何可选中option元素的optgroup标签。比如下面的示例里，第一个optgroup应该显示，第二个需要隐藏。

示例代码 #

CSS

optgroup {
    display: none;
}
optgroup:has(option:not(:disabled)) {
    display: unset;
}

HTML

<select id="location" name="location">
    <option value="" selected="">Standort wählen</option>
    <optgroup label="Kanton Luzern">
        <option value="buttisholz">Buttisholz</option>
        <option value="littau" disabled="">Littau</option>
        <option value="luzern">Luzern</option>
        <option value="malters" disabled="">Malters</option>
        <option value="schuepfheim">Schüpfheim</option>
    </optgroup>
    <optgroup label="Kanton Schaffhausen">
        <option value="schaffhausen" disabled="">Schaffhausen</option>
    </optgroup>
</select>

我已经想出一个在Chrome中测试有效的方案，但希望能用单条语句实现：

optgroup {
  display: none;
}
optgroup:has(option:not(:disabled)) {
  display: unset;
}

我试过下面的写法，但没用，因为:enabled伪选择器只适用于input、select和textarea元素：

optgroup:not(option:enabled) {
  display: none;
}

内容的提问来源于stack exchange，提问作者flip