当optgroup元素没有任何无法 Select 的选项元素时，我想隐藏它.在下面的示例中，应显示第一个optgroup元素，并隐藏第二个元素.
optgroup {
display: none;
}
optgroup:has(option:not(:disabled)) {
display: unset;
}<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;
}
我try 了这个版本，但不起作用，因为:enabled伪 Select 器似乎只能用于input, select and textarea fields:
optgroup:not(option:enabled) {
display: none;
}