我需要禁用已访问的锚点标签的颜色更改。我尝试了以下代码:
a:visited{ color: gray }
在链接被访问前它是灰色的。但这是一个明确声明了在链接被访问后颜色改变的方法。
我如何禁用锚点标签在访问后的颜色更改,而不进行任何显式的颜色更改?
a, a:visited, a:hover, a:active {
color: inherit;
}
注意不需要针对每个选择器重复规则; 只需使用逗号分隔的选择器列表即可(对于锚点伪元素,顺序很重要)。此外,如果您想有选择地禁用特殊锚定颜色,可以将伪选择器应用于类:
.special-link, .special-link:visited, .special-link:hover, .special-link:active {
color: inherit;
}
您的问题仅涉及访问状态,但我假设您指的是所有状态。如果您希望允许除“已访问”以外的颜色更改,则可以删除其他选择器。
你不能这样做。你只能为已访问的状态设置样式。
对于其他人来说,确保你将它们放在正确的顺序中:
a {color:#FF0000;} /* Unvisited link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* Selected link */
a
应该改为 a:link
才正确。 - nikc.orga:link
和a
并不相同。锚点不一定要是链接。 通常仅在包含链接时才会更改其颜色。 - rustyxa, a:visited, a:hover, a:active { color:#00FF00; }
请将以上代码翻译成中文。 - Cassio Luis Felippea:link
。 如果您关心链接与非链接的样式,则使用a:link
,否则无所谓。 - Nelsona:focus{color: #your_desired_color}
。 - Marek Bernád为了让: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:link
,a:visited
2)a:hover
3)a:active
。 - Max Truxa可以使用CSS 4 Color模块中的LinkText
系统颜色值来获取浏览器的默认值,如果需要推迟到那时使用。
a:visited { color: LinkText; }
<a href="https://stackoverflow.com">link</a>
需要注意的是:
这些值可能在其他情况下也会被使用,但是浏览器并不广泛支持。
至少在Firefox 98和Chromium 99中似乎可以正常工作。
@extend
功能:a:visited {
@extend a;
}
您可以通过同时调用 a:link
和 a:visited
选择器来解决此问题。然后跟随 a:hover
选择器。
a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}
我认为如果我为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;
}
要么删除选择器,要么将其设置为与您的文本通常显示的颜色相同。
<a href='your-link'>
<div>
<span>your link name</span>
</div>
</a>
a {
color: orange !important;
}
!important
的作用是,除非使用另一个 !important
,否则无法覆盖所涉及的属性。通常认为除非绝对必要,否则不应使用 !important
;但是,我想不出仅使用 CSS ‘禁用’ :visited
的其他方法。
a:link
默认的链接颜色(通常是蓝色)同时被a:visited
继承,而不需要在任何地方硬编码“蓝色”? - rustyx