Question

我有一些动态创建的选择菜单，有时候会有一些没有任何选项的optgroups。

我用一行CSS代码隐藏了它们。它在当时（2016年）在Chrome中有效，但重新访问我注意到它不再有效的网站。

optgroup:empty{display:none}

有没有办法可以判断它是否已被弃用？如果他们内部没有任何选项，我该如何隐藏optgroup标签？

Answer 1

<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>标记之间存在绝对无空格。

隐藏空的选项组

1 个答案: