如何解决CSS hover样式覆盖React下拉框focus选项背景色的问题

问题原因 #

该样式覆盖问题由CSS优先级规则导致：.select__option.select__option--is-focused为2个类选择器，权重值20；.select__option:hover为1个类选择器+1个伪类选择器，权重值同样为20。同权重的CSS规则中，后定义的规则会覆盖先定义的规则，你的代码中hover规则写在focus规则之后，因此元素同时触发两种状态时，hover的灰色会覆盖focus的蓝色。

解决方案（按推荐优先级排序） #

方案1：调整CSS规则顺序（最简便，无额外代码）

直接把hover规则移到focus规则前面即可，同权重下后定义的focus规则优先级更高，元素同时处于focus和hover状态时会优先显示蓝色背景：

.select__option:hover {
  background: gray;
}

.select__option.select__option--is-focused {
  background: blue;
}

方案2：显式定义focus+hover的组合状态（适配复杂样式场景）

如果你的CSS规则顺序受现有项目约束不能随意调整，可以专门为同时满足focus和hover状态的元素指定样式，该选择器权重为2个类+1个伪类（权重值30），远高于普通hover规则，不会被覆盖：

.select__option.select__option--is-focused {
  background: blue;
}

.select__option:hover {
  background: gray;
}

/* 新增组合状态规则 */
.select__option.select__option--is-focused:hover {
  background: blue;
}

方案3：使用!important（应急方案，非必要不推荐）

如果前两种方案都受限于现有代码结构无法实现，可以给focus规则加上!important强制提升优先级。该方案会大幅提高样式优先级，后续修改该元素样式容易出现覆盖失效的问题，仅建议临时应急使用：

.select__option.select__option--is-focused {
  background: blue !important;
}

.select__option:hover {
  background: gray;
}

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