隐藏空选项组

Question

我有一些动态创建的选择菜单，有时还有一些内部没有任何选项的 optgroup。

我用一行 CSS 代码隐藏了它们。当时它在 Chrome 中工作（2016 年），但重新访问该网站我发现它不再工作。

optgroup:empty{display:none}

有什么方法可以判断它是否已被弃用？如果里面没有任何选项，我应该如何隐藏 optgroup 标签？

Answer 1

无论是<optgroup>标签和:emptyCSS伪类被所有主流浏览器的支持，你的代码确实会隐藏空组：

optgroup:empty {
  display: none
}

<select>
  <optgroup label="Filled">
    <option value="one">One</option>
    <option value="two">Two</option>
  </optgroup>
  <optgroup label="Empty"></optgroup>
</select>

但是，请注意，当元素中有空格或换行符时，它不会被视为空，正如MDN 报告的那样：

在:emptyCSS伪类表示没有孩子的任何元素。子元素可以是元素节点或文本（包括空格）。注释或处理指令不会影响元素是否被视为空。

因此，:empty在以下示例中，选择器不会以它为目标：

optgroup:empty {
  display: none
}

<select>
  <optgroup label="Filled">
    <option value="one">One</option>
    <option value="two">Two</option>
  </optgroup>
  <optgroup label="Empty">
  </optgroup>
</select>

简而言之，要<optgroup>隐藏空白，您需要确保开始和结束标签之间绝对没有空格<optgroup>。