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仅影响第一个选择，例如在这种情况下，只有当悬停时Action变为红色。但是，如果我在动作之前放置喜剧，那么当悬停时，喜剧会变成橙色。

有人可以帮我解决这个问题吗？

由于

Answer 1

关闭括号后摆脱分号。他们干扰了你的第二条规则，但他们不应该在那里：

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