Html 阻止css：悬停在元素上

假设我有以下HTML：

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

我希望悬停效果不应用于

SomeID

div。我可以用jQuery实现这一点，但我想知道是否有一种更简单的方法只使用CSS

---

谢谢您的建议。

只需为id为SomeID的div分配另一条规则即可。这将覆盖另一条规则

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

---

CSS是按顺序解析的，这意味着如果

.SomeClass:hover{color:red；}

然后定义一个规则

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

---

应该“覆盖”初始

颜色：红色
只需覆盖样式：

#SomeID:悬停{
颜色：蓝色；
}

或者，您可以使用：

.SomeClass:not（#SomeID）：悬停{
颜色：红色；
}

这样就更容易更改，但浏览器支持更少。
让我们看看链接伪类特性：

请记住：LAHV（
：link
，
：active
，
：hover
，
：visted
）

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

.SomeClass:link、.SomeClass:active、.SomeClass:visted{color:blue；}
.SomeClass:hover{color:red；}

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

#SomeID:hover{color:blue；}

id
始终优先于
class
是否将
.SomeClass、#SomeID:hover{color:blue；}
视为更简单的方法？）应该通过特殊性来实现。
#SomeId.SomeClass
符号有点多余，我认为：
id
根据定义应用于单个元素。由于其特殊性，它的规则将覆盖类的规则。它可能是多余的，但它确实有助于可读性和理解性。