css - 伪类 :visited, :hover, :active 不工作

Question

CSS 伪类 a:hover、a:visited 和 a:active 不起作用

HTML：

<p> 
    <ul>
        <li>
            <a href="ChrisHorse.jpg" class="Horse"> My Photoshop Assignment #1       </a>
        </li>
        <li>
            <a href="puppies.html"> My puppies page </a>
        </li>
        <li>
            <a href="fish.html"> My Fish Page </a>
        </li>
    </ul>
</p>

CSS：

a:hover {color:green;}
a:visited {color:red;}
a:active {color:black;}

Answer 1

CSS 中的正确顺序应该是：

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

Answer 2

我已经从jsfiddle测试了你的代码。它工作正常。也许您忘记将您的 css 文件包含到您的 html 文件中。

因此，只需从以下说明中包含它：

<link rel="stylesheet" type="text/css" href="mystyle.css">

Answer 3

假设您的问题是:hover，问题是您将选择器放在:hover选择器之前:visited，这意味着一旦您的链接被访问，它将不再具有悬停样式（因为它将被访问的样式推翻） . 只需更改选择器的顺序：

a:visited {color:red;}
a:hover {color:green;}
a:active {color:black;}

这样，当您的链接被访问时，它将是红色的；当您的链接悬停在上面时，它将是绿色的，无论它是否被访问过；当您的链接被激活时，它将是黑色的。

JSFiddle 演示。