防止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股利。我可以用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。