html - 为什么是:hover does not work for the specified class

Question

我有以下 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;
}

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

谢谢

Answer 1

注意:hover必须跟在:link和:visited伪类之后，否则不会影响元素。

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

来自 MDN page :

This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules.

In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.