禁止访问过的锚点标签改变颜色

Question

禁止访问过的锚点标签改变颜色

130

我需要禁用已访问的锚点标签的颜色更改。我尝试了以下代码:

a:visited{ color: gray }

在链接被访问前它是灰色的。但这是一个明确声明了在链接被访问后颜色改变的方法。

我如何禁用锚点标签在访问后的颜色更改，而不进行任何显式的颜色更改？

- popcoder

11个回答

127

你不能这样做。你只能为已访问的状态设置样式。

对于其他人来说，确保你将它们放在正确的顺序中：

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

- Rich Bradshaw

5

严谨地说，a 应该改为 a:link 才正确。 - nikc.org

1

我猜是这样，虽然我很少这样做。 - Rich Bradshaw

4

@nikc.org 并不完全是指“分析”，a:link和a 并不相同。锚点不一定要是链接。通常仅在包含链接时才会更改其颜色。 - rustyx

1

a, a:visited, a:hover, a:active { color:#00FF00; }请将以上代码翻译成中文。 - Cassio Luis Felippe

1

只有当您的锚点没有“href”（如果大量内容是自动生成，则可能会发生）时，才关心a：link。如果您关心链接与非链接的样式，则使用a：link，否则无所谓。 - Nelson

在我的情况下，还需要添加这个：a:focus{color: #your_desired_color}。 - Marek Bernád

15

为了让: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; }

- Rob Lokhorst

2

我是不是看错了，还是你在做与引用中所说的完全相反的事情？根据W3Schools，它应该是1）a:link，a:visited 2）a:hover 3）a:active。 - Max Truxa

9

可以使用CSS 4 Color模块中的LinkText 系统颜色值来获取浏览器的默认值，如果需要推迟到那时使用。

a:visited { color: LinkText; }

<a href="https://stackoverflow.com">link</a>

需要注意的是：

这些值可能在其他情况下也会被使用，但是浏览器并不广泛支持。

至少在Firefox 98和Chromium 99中似乎可以正常工作。

- Andrew Marshall

1

如果您使用像SASS这样的预处理器，您可以使用@extend功能：

a:visited {
  @extend a;
}

因此，您将看到每个带有“a”选择器的样式自动添加了“a：visited”选择器，因此请小心使用，因为您的样式表可能会大大增加。

为了达成妥协，您只能在确实需要的块中添加@extend。

- Андрей Лебедев

-1

您可以通过同时调用 a:link 和 a:visited 选择器来解决此问题。然后跟随 a:hover 选择器。

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

- VooDoo

-1

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

我不想知道默认颜色（它可以在应用程序的common.css中设置，或者您可以使用外部样式）。

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

HTML：

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

CSS：

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

- Smagin Alexey

谁把我设置成负数了，你能写一下为什么吗？当然你可以使用A标签的颜色，但是我已经写好了如果你使用默认浏览器颜色的情况。 - Smagin Alexey

-1

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

- Kyle

OP说，没有进行任何显式的颜色更改。 - Jon

-1

对于那些动态应用类（即活动状态）的人：只需在带有href属性的“a”标签内添加一个“div”标签即可：

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

- Nour SIDAOUI

-2

a {
    color: orange !important;
}

!important 的作用是，除非使用另一个 !important，否则无法覆盖所涉及的属性。通常认为除非绝对必要，否则不应使用 !important；但是，我想不出仅使用 CSS ‘禁用’ :visited 的其他方法。

- Ætérnal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan · Accepted Answer

如果你只想让锚点的颜色与其父元素相同，你可以利用inherit:

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

注意不需要针对每个选择器重复规则; 只需使用逗号分隔的选择器列表即可（对于锚点伪元素，顺序很重要）。此外，如果您想有选择地禁用特殊锚定颜色，可以将伪选择器应用于类：

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

您的问题仅涉及访问状态，但我假设您指的是所有状态。如果您希望允许除“已访问”以外的颜色更改，则可以删除其他选择器。