如何覆盖 CSS：悬停？

Question

我有这个 HTML 代码：

 <ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

对应的CSS是：

 ul li:hover {
    color: red;
}

这允许将 li 悬停在上面并改变它们的颜色。但是，如果我希望其中之一成为 disabled ，我会使用以下内容：

 .disabled {
    color: grey;
}

但是其他 CSS 代码的 hover 伪类仍然有效。有什么办法可以覆盖它吗？

原文由 Abhishek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 CSS 的特殊性，第一条规则会覆盖它，即它更具体。

将第二条规则更改为：

 ul li.disabled, ul li.disabled:hover{
    color:grey;
}

原文由 Ruxta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将您的 CSS 更改为：

 ul li:hover{
    color:red;
}

.disabled ,.disabled:hover{
    color:grey;
}

看到这个小提琴

为 2020 年代更新，您现在可以使用 :not 发挥您的优势

 .disabled {
    color:grey;
}

ul li:not(.disabled):hover{
    color:red;
}

 <ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

原文由 Jon P 发布，翻译遵循 CC BY-SA 4.0 许可协议