html - 事件类状态不起作用

Question

我有以下规则将事件和悬停状态应用于 li 元素:

.toolbar ul li.plus {
    background-position: 0 -170px;
}
.toolbar ul li.plus:hover, li.plus.active {
    background-position: -34px -170px;

现在，当我将鼠标悬停在它上面时，我的 HTML 标记就可以工作了:

<li class="plus"><a href="#" data-content="Add property to shortlist" data-trigger="hover" title="">link</a></li>

但是，如果我想明确地激活它，它将不适用于以下情况:

<li class="plus active"><a href="#" data-content="Add property to shortlist" data-trigger="hover" title="">link</a></li>

任何帮助将不胜感激。

Answer 1

.toolbar ul li.plus 比 li.plus.active 具有更高的特异性。你可以使用

.toolbar ul li.plus.active