html - 为什么:hover不适用于指定的类

我有以下html代码：

 <a class="deletelink" onclick="return !deleteitem('delete.php')" href="delete.php"> Delete Item </a>

与以下CSS：

a.deletelink:hover,
a.deletelink:active {
    background-color: #F00;
    color:#FF0;
}

a.deletelink:visited,
a.deletelink:link {
    line-height:5em;
    width: 5em;
    text-align: center;
    margin:2em;
    display: block;
    font-weight: bold;
    color:#F00;
    background-color:#639;
    padding: 0.5em;
    text-decoration: none;
}

但是当鼠标移到链接上时，链接的颜色不会改变。你能猜出这里出什么问题了吗？

谢谢

最佳答案

请注意，:hover必须位于:link和:visited伪类之后，否则不会影响该元素。

a.deletelink:visited ,a.deletelink:link{ /* ... */ }
a.deletelink:hover, a.deletelink:active { /* ... */ }

从MDN page：


  任何其他与链接相关的伪类都可以覆盖此样式，
  即：link，：visited和：active，出现在后续规则中。
  
  为了给链接设置适当的样式，您需要放置:hover
  在:link和:visited规则之后但在:active规则之前的规则
  由LVHA顺序定义：:link-:visited-:hover-:active。