悬停时链接不会改变颜色

Question

好的，我已经将这些链接设置了一段时间，并决定将悬停效果从使用下划线更改为颜色更改。我只是不明白为什么颜色不会改变。当我将 :hover text-decoration 更改为下划线时，它可以工作，但颜色只是表示我设置的正常链接颜色 (#747474)

.footerList {
    display: inline;
    padding: 0 9px 0 9px;
}
.footerList a:link {
    text-decoration: none;
    color: #747474;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:visited {
    text-decoration: none;
    color: #747474;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:hover {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:active {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

<ul id="footerUlContainer">
<li class="footerList"><a href="privacy.php">Privacy Policy</a></li>
<li class="footerList"><a href="tos.php">Terms of Service</a></li>
<li class="footerList"><a href="tou.php">Terms of Use</a></li>
<li class="footerList"><a href="tou.php">Businesses</a></li>
</ul>

Answer 1

也许你的风格被其他地方覆盖了，我建议使用chrome dev tools，无论如何试试这个：

    #footerUlContainer > .footerList a:hover {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

这是工作的demo。

Aso 查看此blog 以更熟悉特异性规则