有没有办法在更改后将已访问和未访问的链接颜色重置为浏览器默认值?
在我的具体情况下,我有一个主样式文件,其中包含:
a:link { color: black; }
a:visited { color: black; }
我想用默认颜色呈现一些特定的链接。
编辑:这是一个 jsFiddle玩。我想要一个default
与浏览器默认匹配的类样式。
有没有办法在更改后将已访问和未访问的链接颜色重置为浏览器默认值?
在我的具体情况下,我有一个主样式文件,其中包含:
a:link { color: black; }
a:visited { color: black; }
我想用默认颜色呈现一些特定的链接。
编辑:这是一个 jsFiddle玩。我想要一个default
与浏览器默认匹配的类样式。
编辑:
另一种方法是从一开始就避免这个问题。为您希望使用默认样式的特殊链接提供一个特殊类(我们称之为 .default),而不是:
a:link { color: black; }
a:visited { color: black; }
使用非伪类并编写:
a:not(.default):link { color: black; }
a:not(.default):visited { color: black; }
请注意,此伪类在 IE 8 及更低版本上不起作用。对于他们,您可以使用特殊的 CSS(我不喜欢它,但它会起作用)。
您正在寻找的是revert
关键字,但它尚未在大多数浏览器中实现,目前只有 Safari支持它。跟踪每个浏览器开发的链接列在MDN的浏览器兼容性部分中。
有一天,这应该在任何地方都有效:
a { color: red; }
a.reverted { color: revert; }
<a href="#">red</a> <a class="reverted" href="#">default</a> <a href="#">red</a>
但现在考虑一个解决方法。该功能尚不存在。
如果这是控制您的 a 标签的唯一 css,那么只需删除这些标签,这将取消任何样式。你也可以只改变颜色?像这样...
a:link {color: blue;}
a:visited {color: purple;}
enter code here
a.class{ 颜色:继承;}
指定颜色应该从父元素继承。
所以如果你的身体是颜色:蓝色;然后是 a.class{color:inherit} 那么这些示例将是蓝色的。同时,您可以只使用 a.class:link{color:blue}。另一个用于访问链接时。
只需自定义特别感兴趣的链接类别并默认保留其余链接,您就可以做到最好。
你只能摆弄 URL。浏览器记录他们访问过的 URL。如果他们正在呈现一个页面,并且特定的 URL 出现在该列表中,则 url 被着色为“已访问”。
您不能强制浏览器将 URL 视为已访问,除非它们确实存在。但是您可以通过向 url 添加一些不同的内容来使访问的 URL 显示为“新”,以便它在浏览器中显示为新的。例如
example.com/foo.php
example.com/foo.php?random=value
两者都指向同一个脚本,但浏览器会将两者视为“不同”。如果该随机值每次都发生变化,浏览器每次都会有效地认为它是一个全新的 url 并将其着色为“新”。
我想这里要问的一个问题是:为什么?你为什么要首先这样做?据我所知,无论如何,没有 W3C 标准来描述默认链接颜色应该是什么。一个值(例如default
)color
根本没有意义,因为它不是默认值。
话虽如此,最合乎逻辑的方法就是自己设计样式。我不确定您处于什么情况,但无论如何,如果您询问如何将颜色恢复为浏览器默认值,我很确定您做错了什么。所以,在我给你一个相当枯燥的解决方案之前,我会问:你能给我们一些背景信息吗?如果您正在制作菜单栏链接之类的内容,并且您不希望这些菜单栏链接的相同样式泄漏到您的正常链接中,那么您真的应该使用某种容器来选择这些链接。
无论如何,这是干燥的解决方案。大多数浏览器使用蓝色表示链接,紫色表示访问过的链接,红色表示活动链接。因此,以下内容适用于使用这些颜色的浏览器(假设用户没有修改浏览器的样式表,在这种情况下,您可能想了解这一点或使用类似的东西initial
,在 Itay 的回答中检查) .
a:link, a { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
不,如果 CSS 属性已更改(即,如果应用了任何样式表来为该属性分配值),则不能将其设置为浏览器默认值。这遵循 CSS 的基本原则。
所以考虑问一个不同的问题。有一些方法可以限制 CSS 规则对特定元素的影响,而不是阻止所有链接看起来像链接。
只需通过在它们上设置类来设置您想要样式的样式。
.class:link{}
.class:visited{}
然后让其他默认。
您可以使用:
a {
color: inherit;
}
这将继承,并且由于没有其他链接颜色,因此浏览器将为链接提供自己的样式!