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

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

他们必须按此顺序：

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）。

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

Answer 2

jsfiddle link for everyone

$scope

我将你的html和CSS加载到我的sublime中，它完全正常。我玩弄了一些颜色，一切都很棒。我把它装在小提琴里给你看。当您拥有类似的列表时，您希望使用某种类或ID来定位列表以专门定位它们。我在小提琴里面评论了一些东西让你看。 .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; */ }

Answer 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设置，使用检查器控制台至关重要。我想你可能已经在使用检查员，但如果你想了解更多信息，请告诉我。

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

3 个答案: