简单CSS的奇怪：.class：hover属性被#child的属性覆盖

Question

在Chrome和Firefox中，以下内容没有达到预期的效果：

<style>
    #hoverOnMe { background-color:orange; }
    .open:hover { background-color:lightblue; }
</style>

<div id='hoverOnMe' class='open'>HELLO</div>

：悬停不起作用。在盘旋时背景仍为橙色。

但是，其他三种可能的组合（按ID列出两次，按类列出两次，按类列出后跟id）都有效。

当然，我的实际项目比这个例子稍微复杂一点;我想添加一个＆＃34; open＆＃34;每个可收纳元素的类。

这里发生了什么？什么是最简单的解决方法？

Answer 1

  

我想添加＆＃34;打开＆＃34;每个可收纳元素的类。

如果是和的情况，那么您希望所有元素都具有相同的行为， 然后你可以使用!important：

.open:hover { 
   background-color:lightblue!important;
}