阻止css：悬停在元素上

Question

假设我有这个HTML：

<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>

使用此CSS

.SomeClass{color:blue;}
.SomeClass:hover{color:red}

我希望悬停效果不适用于SomeID div。我可以用jQuery做到这一点，但我想知道是否有一种更简单的方法来使用CSS。

感谢您的建议。

Answer 1

CSS按顺序解析，这意味着在定义

之后

.SomeClass:hover { color: red; }

然后定义规则

#SomeId.SomeClass:hover { color: blue; }

应该'覆盖'最初的color: red;

Answer 2

只需将另一个规则分配给ID为SomeID的div。这将覆盖其他规则。

.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}

<强> jsFiddle example

Answer 3

只需覆盖样式：

#SomeID:hover {
    color:blue;
}

或者，您可以使用：

.SomeClass:not(#SomeID):hover {
    color:red;
}

然后更容易更改它，但浏览器支持更少。

Answer 4

让我们看一下链接伪类特异性：

请记住： LAHV （:link，:active，:hover，:visited）。

首先，为了正确级联，我们将以下内容分配给.SomeClass：

.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }

接下来，让我们指定#SomeID：

#SomeID:hover { color: blue; }

id始终优先于class。