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;}