不可能的？拿着我的啤酒瓶子（来源于某笑话。

使选择元素知道当前选项。CSS 可以处理其余部分。为此，我们只需要在onchange事件中赋值。稍加努力，您还可以将<select>标签初始化为原始值；不包括在下面，但它非常简单，只需在编写标记时给它一个“数据选择”属性。

    <select onchange=" this.dataset.chosen = this.value; ">
        ...
        ...
    </select>

现在您可以轻松定位和设置样式：

select[data-chosen='opt3'] { 
    border: 2px solid red;
}

请参阅CodePen。

旁注：“选择”不是魔术词，只是一个描述性名称 - 它可能是“圣诞老人”。这样看起来也会更好。

不幸的是，是的——这是目前仅使用 CSS 无法实现的。正如这个问题的答案和评论中提到的，目前没有办法让父元素接收基于其子元素的样式。

为了做你想做的事，你基本上必须检测选择了哪个孩子（<option>），然后相应地设置父母的样式。

但是，您可以通过一个非常简单的 jQuery 调用来完成此操作，如下所示：

HTML

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

jQuery

var $select = $('select');
$select.each(function() {
    $(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
    $(this).attr('class', '').addClass($(this).children(':selected').val());
});

CSS

select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

这是一个工作 jsFiddle。

回到关于选择器未来的问题。是的-“主题”选择器旨在完全按照您的要求进行。如果/当它们真正在现代浏览器中上线时，您可以将上述代码修改为：

select { background: #fff; }
!select > option[value="foo"]:checked { background: red; }
!select > option[value="bar"]:checked { background: green; }

作为旁注，关于!应该在主题之前还是之后仍然存在争议。这是基于!something意思是“不是某物”的编程标准。因此，基于主题的 CSS 实际上可能会变成这样：

select { background: #fff; }
select! > option[value="foo"]:checked { background: red; }
select! > option[value="bar"]:checked { background: green; }

所以这就是我发现的可能。最大的问题是，在您选择了一个元素后，背景颜色并没有改变，因为选择的元素实际上并没有被重绘（在 IE 中似乎更普遍——看图）。因此，即使您选择了不同的选项，当您再次单击选择元素时，该选项也不会在列表中突出显示。

要修复 IE 中的重绘问题，需要将 IE 更改font-size最小量，+-.1。另一件事似乎没有很好地记录，是伪类:checked 也适用于选择控件。

提琴手显示添加的css 使其成为可能。

我只是在 Chrome 和 IE9 上短暂地玩过它，仅供参考。

编辑：显然，您需要将 [value="x"] 设置为您想要的值以突出显示特定选项。

纯 CSS 方法：-

如果您想在使用选择器选择空值时应用样式，您可以设置它的样式，如:valid下面的代码

如果选定的值为空，则显示为红色

select > option {
  color: black;
  font-weight:initial;
}
select option[value=""] {
  color: red;
  font-weight:bold;
}
select[required]:invalid {
  color: red;
  font-weight:bold;
}

<select required name="fontSize">
<option value="">Please select</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15">15 px</option>
<option value="16">16 px</option>
</select>
<select required name="fontColor">
<option value="">Please select</option>
<option value="red" selected>Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>