CSS 中的 visited 伪类
cssweb developmentfront end technology更新于 2024/7/12 1:16:17
伪类用于显示元素或 CSS 选择器的不同状态。visited 伪类用于显示链接已被访问。
此伪类主要与链接关联。
语法
a:visited { color:green;}
让我们来看看 :visited 伪类 在不同场景下的实际用法，如下所示 -
示例
<html>
<head>
<style>
a:visited { color:green;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>
解释
首次看到链接时，它将显示正常的链接颜色(蓝色)，如果此链接已被访问过一次，则链接将变为绿色。
示例
<html>
<head>
<style>
/* 设置默认样式，使该样式在 :visited 状态下可见 */
a { background-color: white; border:1px solid white;}
a:visited {border:yellow;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>
解释
在此示例中，一旦链接被访问，链接将包含 1px 黄色边框。
示例
<html>
<head>
<style>
/* 设置默认样式，使该样式在 :visited 状态下可见 */
a { background-color: white; }
a:visited { background-color: seagreen;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>
解释
当您访问该链接一次时，背景颜色将更改为海绿色。
样式限制
出于隐私和安全原因，访问的伪类可以使用有限的 CSS 属性，例如颜色、背景颜色、边框颜色、边框底部颜色、边框左侧颜色、边框右侧颜色、边框顶部颜色、列规则颜色、轮廓颜色以及 SVG 属性填充和描边。
浏览器兼容性
| Chrome | Firefox | Edge | IE | Safari | Opera |
| 1 | 1 | Yes | Yes | 1 | 3.5 |
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
