当访问时禁用锚标记的颜色变化

我必须在访问时禁用锚标签的颜色变化。我这样做了:

a:visited{ color: gray }

(链接在访问之前是灰色的。)但是这是我在访问链接后显式声明颜色的一种方式，这也是一种颜色变化。

当访问锚标记时，如何禁用其颜色变化而不做任何明确的颜色变化？

245720 次浏览
小开

要么删除选择器，要么将其设置为与正常显示的文本相同的颜色。

小开
最佳答案

您不能。您只能设置访问状态的样式。

对于其他发现这个问题的人，请确保他们按照正确的顺序排列:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */
小开

为了使 :hover覆盖 :visited，并确保 :visited与初始颜色相同，:hover必须在 :visited之后。

因此，如果你想禁用颜色变化，a:visited必须在 a:hover之前。像这样:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

要禁用 :visited变更，您需要使用非伪类来设置它的样式:

a, a:visited { color: gray; }
a:hover { color: red; }
小开

如果你只是想让锚的颜色和锚的父元素保持一样，你可以利用继承:

a, a:visited, a:hover, a:active {
color: inherit;
}

注意，不需要为每个选择器重复规则; 只需使用逗号分隔的选择器列表(锚伪元素的顺序问题)。另外，如果你想有选择地禁用特殊的锚点颜色，你可以将伪选择器应用到一个类:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
color: inherit;
}

你的问题只是关于被访问的州，但我以为你指的是所有的州。如果您想允许除访问外的所有颜色变化，您可以删除其他选择器。

小开

用途:

a:visited {
text-decoration: none;
}

但是它只会影响那些还没有被点击的链接。

小开

您可以通过一起调用 a:link和 a:visited选择器来解决这个问题。

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}
小开

我认为如果我为 a:visited设置颜色是不好的: 您必须知道标记 a的默认颜色，并且每次都要与 a:visited同步。

我不想知道默认颜色(可以在应用程序的 common.css中设置，也可以使用外部样式)。

我认为这是个不错的解决方案:

返回文章页面

<body>
<a class="absolute">Test of URL</a>
<a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

返回文章页面

.absolute{
position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
text-decoration: none;
color: transparent;
}
小开 
a {
color: orange !important;
}

!important has the effect that the property in question cannot be overridden unless another !important is used. It is generally considered bad practice to use !important unless absolutely necessary; however, I can't think of any other way of ‘disabling’ :visited using CSS only.

小开

如果你使用一些预处理器，如 SASS，你可以使用 @extend功能:

a:visited {
@extend a;
}

因此，您将看到自动添加 a:visited选择器为每个样式与 a选择器，所以要小心与它，因为您的样式表可能会增加大小很多。

作为一种折衷方案，你可以在你真正需要的那些块中添加@tended。

小开

对于那些动态应用类(即活动类)的用户: 只需在“ a”标记中添加一个带有 href 属性的“ div”标记:

<a href='your-link'>
<div>
<span>your link name</span>
</div>
</a>
小开

It’s possible to use the LinkText 系统颜色值系统颜色值 from the CSS 4 Color Module to obtain the browser default value if one wishes to defer to that.

a:visited { color: LinkText; }
<a href="https://stackoverflow.com">link</a>

However note:

这些值也可以在其他上下文中使用，但浏览器并不广泛支持。

至少在 Firefox 98和 Chromium 99中看起来是可以工作的。


提交答案