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

【问题标题】：dont apply css style if element has a specific class如果元素具有特定类，则不应用 css 样式
【发布时间】：2011-12-06 06:35:30
【问题描述】：

我有一个有序列表：

<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 项，它将具有红色背景色。

现在，如果元素碰巧带有被选中的样式（红色背景），我该如何禁用悬停样式？

换句话说，我不想要：

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

应用到被选中的 li... 我该怎么做？

【问题讨论】：

【解决方案1】：

您需要覆盖 hover 样式

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

【讨论】：

【解决方案2】：

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

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

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

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

您可以使用像Selectivizr 这样的工具来为 IE 添加对此的支持，但坦率地说，对于这个示例来说这并不值得，因为您可以轻松地添加另一个 CSS 样式来覆盖另一个一：

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

希望对您有所帮助。

【讨论】：

【解决方案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>

【讨论】：