CSS元素懸停隻影響第一個

Question

我有以下的CSS和HTML：

.moods a#Action:hover{background: red;}; 
.moods a#Comedy:hover{background: orange;}; 

<div class='moods'> 
    <a id='Comedy'>want to laugh</a> 
    <a id='Action'>edge of the seat</a> 
    <a id='Science Fiction'>it's all fantasy</a> 

</div> 

出於某種原因，CSS僅影響第一選擇，例如在這種情況下，唯一的動作變得紅時，懸停。但是，如果我在動作之前放置喜劇，那麼喜劇在懸停時會變成橙色。

有人可以幫我解決這個問題嗎？

謝謝

Answer 1

擺脫分號後的分號。他們干擾你的第二條規則，他們不應該在那裏：

.moods a#Action:hover{background: red;} 
.moods a#Comedy:hover{background: orange;}