悬停时锚元素不会改变颜色答案

【问题标题】：Anchor element doesn't change color when hovered悬停时锚元素不会改变颜色
【发布时间】：2016-04-27 10:42:36
【问题描述】：

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

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

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

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

它们必须按以下顺序：

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

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效！ a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

_{来源：http://www.w3schools.com/css/css_pseudo_classes.asp}

您可以使用一个流行的助记词来记住这一点：爱恨 (lv ha)。

有关详细信息，请参阅以下参考资料：

【讨论】：

与问题无关，但最好始终将:focus 包含在列表中（在:hover 之前）。它用于键盘导航。

【解决方案2】：

jsfiddle link for everyone

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

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

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


.test {
  /* color: black; */
}

我将你的 html 和 CSS 加载到我的 sublime 中，它完全可以正常工作。我玩弄了一些颜色，一切都很棒。我把它装在小提琴里给你看。当您拥有像您这样的列表时，您希望使用某种类或 ID 来定位列表以专门针对它们。我在小提琴里面评论了一些东西给你看。 enter code here

【讨论】：

【解决方案3】：

如果你发现你的css不管你做什么都没有生效，那么值得添加!important参数来告诉浏览器你指定你的样式属性具有优先级。

.container a {
  text-decoration:none !important;
  font-weight: bold !important;
  }
  .container a:visited {
    color: rgb(230, 0, 230) !important;
  }     
  .container a:hover {
    text-decoration:underline !important;
    color: white !important;
  }

话虽如此，有时即使使用!important，您的风格仍然可能被覆盖。要解开浏览器中的 CSS 设置，必须使用检查器控制台。我认为您可能已经在使用检查器，但如果您想了解更多信息，请告诉我。

【讨论】：