我必须在访问时禁用锚标记的颜色更改。我这样做了:
a:visited{ color: gray }
(访问之前链接是灰色的。)但这是我在访问链接后明确说明颜色的方式,这也是颜色变化。
如何在访问时禁用锚标记的颜色更改而不进行任何明确的颜色更改?
答案 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:link
和a: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;
}
但它只会影响尚未点击的链接。