css - 简单 CSS : . 类的奇怪之处:悬停属性被#child 的属性覆盖

Question

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

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

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

:hover 不起作用。悬停时背景保持橙色。

但是，其他三种可能的组合(按 id 列出两次，按类别列出两次，按类别后跟 id 列出)中的每一个都有效。

当然我的实际元素比这个例子复杂一点；我想为每个悬停元素添加一个“开放”类。

这是怎么回事？最简单的解决方法是什么？

Answer 1

I'd like to add an "open" class to every hoverable element.

好吧，如果是这种情况并且您希望所有元素的相同行为，那么你可以只使用 !important:

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