当 optgroup 元素不包含任何未使用 CSS 禁用的选项元素时，如何隐藏它 [关闭]

Question

当 optgroup 元素没有任何无法选择的选项元素时，我想隐藏它。在下面的示例中，第一个 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 中进行了测试），但我正在寻找一种只有一个语句而不是 2 个语句的解决方案（如果可能的话）：

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

我尝试了这个版本，但不起作用，因为似乎 :enabled 伪选择器只能用于 input、select 和 textarea 字段:

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

Answer 1

这是一个单语句解决方案，应该适用于现代浏览器，并提供隐藏没有任何非禁用选项元素的 optgroup 元素的所需行为。

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

其工作原理如下：

• optgroup:not(:has(option:not(:disabled))) 选择器选择所有 optgroup 元素不具有子选项元素 已禁用。

• :has() 伪类用于检查 optgroup 元素是否具有 未禁用的子选项元素。

• 然后使用 :not() 伪类来否定此条件， 有效地针对没有任何选项的 optgroup 元素 非禁用选项元素作为子元素。

• 显示：无；然后将规则应用于目标 optgroup 元素，隐藏它们。