html - CSS 选择器 a :link:hover

Question

我正在尝试创建我的网站，这样您就可以通过每个 div 中元素的颜色来判断您所在的位置。该网站只有一页，当您单击打开该部分时，我使用 jQuery 滑出网站的部分(而不是单独的 .html)。

为了向他们显示他们打开了哪个部分，我将每个部分中的所有链接都设置为与打开该部分的文本相同的颜色。但是我也想要 <a> </a>不是链接的标签可以为网站增添一点色彩，并吸引浏览者关注关键信息。出于这个原因，我只想将链接效果应用于 <a> </a>实际上是链接的标签......所以我试过这个:

#box1 a{
    color: #68cff2;
}

#box1 a:link:hover{
    color: #ffffff;
    background-color: #68cff2;
}

这适用于背景颜色，因为它只更改 <a> </a> 的背景颜色有一个 href="..."但它不会更改此类链接的字体颜色...有什么方法可以对此进行排序吗？

Answer 1

:link伪类仅适用于未访问 链接，而不是所有 链接。请记住，您也访问过链接以进行说明。您可能需要为访问过的链接重复选择器，因为我注意到您还没有这样做:

#box1 a:link:hover, #box1 a:visited:hover {
    color: #ffffff;
    background-color: #68cff2;
}

(或者只使用 #box1 a[href]:hover 代替 more info )

不过，我应该补充一点，你不应该使用 <a>标签来标记不是链接的东西，也不能作为 anchor ，只是为了“为网站添加一点色彩并吸引观众关注关键信息”。这不是它们的设计目的。一个更具语义的替代方案类似于 <em>或 <strong> , 当然，如果你不想要它，你必须删除斜体或粗体样式:

#box1 a, #box1 em {
    font-style: normal;
    color: #68cff2;
}

#box1 a:hover{
    color: #ffffff;
    background-color: #68cff2;
}

那么您就不需要指定 :link和 :visited伪类，因为你基本上可以保证所有剩余的 <a>元素是链接。