隐藏空Optgroup

Question

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

我用一行CSS代码把它们藏起来。它在当时(2016年)的Chrome上运行，但是重新访问我注意到的网站，它已经失效了。

optgroup:empty{display:none}

有什么办法让我知道它是否被否决了吗？如果optgroup标签里面没有任何选项，我应该如何隐藏它们呢？

Answer 1

标记和*空 CSS伪类都是支持所有主要浏览器，您的代码确实会隐藏空组：

​

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报告一样

: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>标记之间绝对没有空白。