Question

我必须在访问时禁用锚标记的颜色更改。我这样做了：

a:visited{ color: gray }

（访问之前链接是灰色的。）但这是我在访问链接后明确说明颜色的方式，这也是颜色变化。

如何在访问时禁用锚标记的颜色更改而不进行任何明确的颜色更改？

Answer 1

如果你只想让锚颜色与锚的父元素保持一致，你可以利用继承：

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

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

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

你的问题只询问访问状态，但我认为你的意思是所有州。如果要在所有访问者之间允许更改颜色，则可以删除其他选择器。

Answer 2

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

对于其他发现此问题的人，请确保按正确顺序排列：

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

Answer 3

要: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; }

Answer 4

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

Answer 5

我认为如果我为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;
}

Answer 6

如果使用诸如SASS之类的预处理器，则可以使用@extend功能：

a:visited {
  @extend a;
}

因此，您会看到a:visited选择器为每种样式自动添加的a选择器，因此请谨慎使用，因为样式表的大小可能会大大增加。

作为一种折衷，您只能在您真正需要的块中添加@extend。

Answer 7

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

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

Answer 8

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

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

Answer 9

a {
    color: orange !important;
}

!important的作用是，除非使用另一个!important，否则无法覆盖所讨论的属性。除非绝对必要，否则通常使用!important被认为是不好的做法；但是，我无法想到仅使用CSS来“禁用” :visited的任何其他方式。

Answer 10

使用：

a:visited {
    text-decoration: none;
}

但它只会影响尚未点击的链接。

访问时禁用锚标记的颜色更改

10 个答案: