用于 SELECT html 元素且未选择任何内容的 CSS 选择器

Question

我知道我经常使用“选择”这个词...抱歉。

无论如何，我正在寻找一个 CSS 选择器，可以用来识别页面上尚未进行选择的 HTML Select 元素，以便我可以突出显示它们，让用户知道这些元素仍然需要完成。我确实有一个空选项作为选择中的第一个元素，所以如果这有帮助......请使用它。

到目前为止我的愚蠢尝试： 选择：空 选择[selectedIndex =“0”]

<select>
  <option value="" />
  <option value="real selection" />
<select>

所以本质上，我想找到所有未选择选项、选择的值为 0 或选择的索引为 0 的选择。（这些在我的场景中是等效的）。这样我就可以在屏幕上突出显示这些内容，让用户知道，“嘿，你还有更多工作要做。”

仅供参考：Psuedo 和 CSS3 选择器也适合这种情况。

Answer 1

这在 CSS 3 中是不可能的。

当支持选择器级别 4 时（假设该位不变），您可以 确定选择器的主题不是选择器中的最后一项，并且：

select {
    /* Default. Put non-selected styles here */
}

!select > option + option:checked {
    /* An option following another option (so not the first option) is selected */
}

如果要处理

optgroup

元素，则需要使选择器变得更复杂。

Answer 2

这里有两种不同的方法：

1/ 使用第一个子伪选择器：

option:first-child {
  /* style */
}

2/ 使用属性选择器：

option[value=""]{
      /* style */
    }

我个人会选择属性选择器，因为你永远不知道你的选项将来将如何排序。