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

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

如果希望遵循这一点，可以使用CSS 4 颜色模块中的LinkText 系统颜色值来获取浏览器默认值。

\n

\r\n

\r\n

a:visited { color: LinkText; }

\r\n

<a href="https://stackoverflow.com">link</a>

\r\n

\r\n

\r\n

\n

但请注意：

\n

\n

这些值也可以在其他上下文中使用，但并未得到浏览器的广泛支持。

\n

\n

它至少看起来可以在 Firefox 98 和 Chromium 99 中运行。

\n