IE11 未将 CSS 类应用于 Select 下拉列表的第一个 Option 元素

Question

某个.aspx 页面呈现一个简单的SELECT 列表，其中包含各种OPTIONs。这些OPTION 元素中的一些（但不是全部）将应用一个特殊的样式类来以不同的颜色呈现它们以反映特定的不同状态。

最终，这行得通，只有一个令人沮丧的例外。如果SELECT 中的first OPTION 被指定为CLASS，IE11 将不会使用相应CSS 规则中指定的颜色呈现该选项。在 IE11 开发工具中查看页面时，似乎 正在应用规则 ，但从视觉上看，并非如此。如果特定的OPTION 显示为SELECT 中的任何其他项目，则该规则有效。

手头的解决方案（下面提供了一个 sn-p）是根据此处提出的一个看似非常相似的案例建模的： How to change the text color of first select option

<style>
select {color: black;}
select option {color: black;}
select option.specialStatus{
    color: red;
}
select option.specialStatus:first-child{
    color: red;
}
</style>
..
<select>
    <option class='specialStatus' value=1>Hi</option>
    <option value=2>Bye</option>
</select>

实际上，意图是说“通常将带有 OPTION 的 SELECT 渲染为黑色，除非它们被赋予 'specialStatus' 类。当存在 'specialStatus' 时，将 OPTION 渲染为红色。'first-child ' 规则是为了克服可能存在的任何默认样式。

奇怪的是，这种样式在旧的、讨厌的 IE8 中 100% 有效 - 这种第一个 OPTION 不被尊重的行为仅在 IE11 中可见。这就是为什么上面链接的主题解决方案似乎是显而易见的选择 - 它有效，但显然与类名称结合的某些东西会导致问题。在准确诊断出了什么问题时，我们将不胜感激。

Answer 1

添加到我的评论中，问题是select 颜色在选择时使Hi 值变为黑色。要使其工作，您将需要 JavaScript。我更新了@YuriyGalanter 的fiddle 以包含必要的JavaScript：

function changeSelectClass(e) {
    this.classList.remove('specialStatus');
    if (this.options[this.selectedIndex].className.indexOf('specialStatus') !== -1) {
        this.classList.add('specialStatus');
    }
}
document.getElementsByTagName('select')[0].onchange = changeSelectClass;
changeSelectClass.call(document.getElementsByTagName('select')[0]);

和 CSS：

select { color: black; }
option { color: black; }
select.specialStatus, option.specialStatus { color: red; }

您可以通过将与应用于option 的类相同的类应用于select 来使其更通用，但这回答了所提出的具体问题。