为何该下拉选择框样式需要:invalid CSS选择器才能生效？

问题场景 #

我想让<select>的第一个<option>显示为灰色，测试了两种CSS写法，发现第一种失效，第二种生效，但不太理解原因：

测试代码 #

CSS代码

/* 失效 */
.select1 option[value=""] {
  color: #999999;
}

/* 生效 */
.select2:invalid,
.select2 option[value=""] {
  color: #999999;
}

HTML代码

<div>Fails:</div>
<select class="select1">
  <option value="" selected>Select a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
<br/><br/>

<div>Works:</div>
<select class="select2" required>
  <option value="" selected>Select a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

原以为.select2:invalid, .select2 option[value=""]是“或”逻辑，只要选中的option符合[value=""]就能生效，但去掉.select2:invalid就失效，请问原因是什么？

原因解析 #

这是浏览器对<select>元素的样式渲染规则导致的：

• 当<select>没有required属性时，选中value=""的option时，浏览器会把<select>视为有效状态，此时<select>的默认文字颜色会直接覆盖掉<option>自身的颜色设置，所以单独给option[value=""]设置颜色不生效。
• 给<select>加上required属性后，选中value=""的option时，<select>会处于无效状态（:invalid伪类触发），这时候浏览器不会用默认的文字颜色强制覆盖，而是允许<option>的自定义颜色生效；同时.select2:invalid也会给整个<select>设置灰色，相当于双重保障了选中时的文字颜色显示为灰色。

简单来说，单独设置option[value=""]的颜色会被<select>有效状态下的默认样式覆盖，而:invalid伪类的作用就是打破这个覆盖规则，让自定义颜色能正常显示。

内容的提问来源于stack exchange，提问作者lonix