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

时间:2011-09-03 07:52:22

标签: html css anchor

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

a:visited{ color: gray }

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

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

10 个答案:

答案 0 :(得分:159)

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

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

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

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

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

答案 1 :(得分:73)

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

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

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

答案 2 :(得分:10)

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

a:visited {
  @extend a;
}

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

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

答案 6 :(得分:0)

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

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

答案 7 :(得分:-2)

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

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

答案 8 :(得分:-2)

a {
    color: orange !important;
}

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

答案 9 :(得分:-3)

使用:

a:visited {
    text-decoration: none;
}

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