html - 悬停时 anchor 元素不会改变颜色

Question

我有以下 CSS:

.container a {
    text-decoration: none;
    font-weight: bold;
    color: rgb(23, 230, 230);
}

.container a:hover {
    text-decoration: underline;
    color: white;
}

.container a:visited {
    color: rgb(230, 0, 230);
}

还有这个 html(部分):

<div class="container">
    ...
    <div class="menu">
        <ul>
            <li>
                <a href="#">link1</a>
            </li>
            <li>
                <a href="#">link2</a>
            </li>
            <li>
                <a href="#">link3</a>
            </li>
        </ul>
    </div>
</div>

我不明白为什么所有的链接选项都有效，除了悬停时的颜色:它确实有下划线，但颜色没有改变。有谁知道为什么吗？

Answer 1

在处理 anchor 元素上的伪类时，顺序很重要。

它们必须按以下顺序:

a:link
a:visited
a:hover
a:active

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!

_{source: http://www.w3schools.com/css/css_pseudo_classes.asp}

有一个流行的助记符可以用来记住这一点:爱恨 (lv ha)。

有关更多详细信息，请参阅这些引用资料:

• Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
• Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
• How To Remember The Order of Selectors: LOVE and HATE