如果元素具有特定类，则不要应用 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 */
     }

应用于所选的 li...我该怎么做？

Answer 1

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>

Answer 2

您需要覆盖 hover 样式

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

Answer 3

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

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

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

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

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

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

希望有帮助。