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

Posted 2023-03-06

【中文标题】未选择任何内容的 SELECT html 元素的 CSS 选择器

【英文标题】：CSS selector for SELECT html element with nothing selected

【发布时间】：2013-07-09 23:18:18

【问题描述】：

我知道我在那里使用了很多选择这个词......对不起。

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

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

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

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

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

【参考方案1】：

这在 CSS 3 中是不可能的。

当支持 4 级选择器时（假设此位不变），您可以将 determine the subject of the selector 设置为选择器中的最后一项以外，并且：

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


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

如果要处理 optgroup 元素，则需要使选择器更复杂。

【讨论】：

最新草案中有一点将! 排除在CSS 的使用之外；如果 that 没有改变，那么这可能不再是一个选项。