如何覆盖CSS:悬停？

Question

所以我有这个:

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

相应的CSS是:

ul li:hover {
    color: red;
}

这允许两个'li'被悬停并且颜色改变.但如果我想要其中一个被"禁用",我会使用以下内容:

.disabled {
    color: grey;
}

但是其他CSS代码的'hover'伪类仍然会开始......我可以覆盖这个吗？

Answer 1

第一条规则会覆盖它,因为关闭CSS特性,即它更具体.

将第二条规则更改为:

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

我还发现使用类似`ul li:not(.disabled)的东西是值得的:hover {color:red}` - 这会将悬停效果应用于所有没有添加类.disabled的li元素... (3认同)
使用!important可以回来咬你,@ Procrammer的方法是更好的选择. (2认同)

Answer 2

将您的CSS更改为:

ul li:hover{
    color:red;
}

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