css - 隐藏空的Optgroup

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

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

optgroup:empty{display:none}

有什么办法可以告诉我是否已弃用？如果optgroup标签内部没有任何选项，应该如何去隐藏它们？

最佳答案

<optgroup>标记和:empty CSS伪类均为supported in all major browsers，您的代码实际上将隐藏空组：

optgroup:empty {
  display: none
}

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

但是，请注意，当元素内有空格或换行符时，它不会被视为空，如reported by MDN一样：


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


因此，在以下示例中，: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>标记之间绝对没有空格。

关于css - 隐藏空的Optgroup，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49723108/