CSS hover选择器未按媒体查询规则正确匹配问题咨询

这是你的代码书写顺序导致的疏漏，不属于CSS的预期行为。

问题原因 #

CSS选择器优先级判断规则中，当两个选择器的权重完全相等时，后定义的规则会覆盖先定义的规则。
你当前的代码顺序是：先定义了媒体查询@media screen and (max-width: 540px)内的.result:hover规则，后续又定义了全局生效的.result:hover规则，二者选择器权重完全一致。因此无论媒体查询是否命中，位置靠后的全局.result:hover规则都会覆盖前面媒体查询内的规则，就会出现你遇到的hover动画始终走默认规则的问题。

解决方法 #

• 最简单的方案是调整规则书写顺序，把全局的.result:hover规则移动到媒体查询块的前面，这样当视口宽度符合媒体查询条件时，后定义的媒体查询内的hover规则就会覆盖前面的全局规则。

修正后的代码示例：

.result{
  animation: make 500ms both;
  /*My CSS*/
}

.result:hover {
  animation: explode 500ms both;
}

@media screen and (max-width: 540px){
  .result{
    animation: make540 200ms both;
  }
  .result:hover{
    animation: explode540 200ms both;
  }
}

• 如果你不方便调整代码顺序，也可以通过提升媒体查询内hover规则的权重实现效果，比如给选择器加父级前缀.parent .result:hover，或者添加!important（除非必要不推荐使用!important）。

内容的提问来源于stack exchange，提问作者Richard Onslow Roper