CSS 选择器 a:link:hover答案

【问题标题】：CSS selector a:link:hoverCSS 选择器 a:link:hover
【发布时间】：2012-09-01 16:36:45
【问题描述】：

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

为了向他们展示他们打开了哪个部分，我将每个部分中的所有链接都设置为与打开该部分的文本相同的颜色。但是，我也希望有<a> </a> 不是链接的标签，以便为网站添加一些颜色并吸引观众了解关键信息。出于这个原因，我只想将链接效果应用于实际上是链接的<a> </a> 标签......所以我尝试了这个：

#box1 a{
    color: #68cff2;
}

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

这适用于背景颜色，因为它只会更改具有 href="..." 的 <a> </a> 的背景颜色，但不会更改此类链接的字体颜色。 . 有什么办法可以解决这个问题吗？

【问题讨论】：

如果它不改变字体颜色，你可能有一些具有更高特异性的东西覆盖了颜色。此外，您可能需要为已访问的链接重复选择器：#box1 a:link:hover, #box1 a:visited:hover（或者只使用#box1 a[href]:hover，而不是more info）。
这些是我为每个框选择元素颜色的唯一样式...：/
我什至尝试过使用 !important... 也不起作用：/
尝试查看浏览器的开发人员工具，看看 CSS 面板中发生了什么。您可能还希望显示您的 HTML。
好主意！一秒钟……

标签： html css css-selectors pseudo-class

【解决方案1】：

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

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

（或者直接使用#box1 a[href]:hover，more info）

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

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

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

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

【讨论】：

我尝试了a[href]:hover 方法以及我犯的简单愚蠢的其他错误：P，但它似乎没有用。
@simonthumper：嗯，很奇怪。好吧，正确的 CSS 方法是使用伪类，而且无论如何您都可以获得免费的 IE 兼容性，所以为什么不这样做;)

【解决方案2】：

需要a:link:hover{}吗？尝试使用a:hover {}

【讨论】：

【解决方案3】：

a:hover 也会影响锚标记，如果它们的行为方式与链接相同，最终用户可能会感到困惑。

【讨论】：