如果元素具有特定的类，则不应用css样式

Question

我有一个有序的清单：

<ol id="selectable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

当我将鼠标悬停在某个项目上时，我希望它有某种突出显示，因此我有：

     #selectable li:hover
 {
        /* some style */
     }

使用JavaScript我为这些列表项提供了属性，当单击它们时，它们会更改样式。因此，如果我点击第4项，它将具有红色背景颜色。

现在，如果元素碰巧与样式ckicked（红色背景），我怎么能禁用悬停样式？

换句话说，我不想要：

     #selectable li:hover
 {
        /* some style */
     }

申请被选中的李......我该怎么做？

Answer 1

您需要覆盖hover样式

#selectable li.selectedclass:hover{
    /* overriding styles */
}

Answer 2

真正的CSS3答案是:not()选择器。

您可以将现有的CSS更改为以下内容：

#selectable li:hover:not(#selecteditem)
{
  /* some style */
}

不幸的是，这个答案可能不是您想要的答案，因为IE8及更早版本不支持:not()选择器。

你可以使用Selectivizr之类的工具向IE添加对此的支持，但坦率地说，这个例子几乎不值得，因为你可以轻松添加另一种CSS样式来覆盖另一个：

#selectable li#selecteditem:hover
{
    /* override styles */
}

希望有所帮助。

Answer 3

CSS3：

#selectable li:hover:not(.selected) {
 background:red;

}

HTML：

<ol id="selectable">
  <li>Item 1</li>
  <li class="selected">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>