没有选择任何内容的 SELECT html 元素的 CSS 选择器

Question

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

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

到目前为止我的愚蠢尝试： select:empty 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如果您要处理元素，则需要使选择器更加复杂。