CSS :visited 伪类

:visited 选择器选择页面中访问过的链接并设置样式。

:visited 伪类在用户访问过链接时应用。

如果我们尝试通过给访问的链接添加样式属性(例如,背景图像)来为访问的链接添加样式,那么它在现代浏览器中将不起作用。

但是如果我们使用任何其他伪类,样式属性将正常工作。

使用此选择器修改的样式非常有限。
浏览器允许以下样式:

  • 颜色
  • 背景颜色
  • 边框颜色
  • 轮廓颜色
  • 列规则颜色
  • 填充和描边的颜色部分

Web 浏览器可以选择忽略 :link 和 :visited 伪类的规则样式,因为 :visited 伪类可能会被滥用,并且可以从访问者的浏览器历史记录中获取信息。

语法

:visited {
  css declarations;
}

:visited 选择器示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      a {
        display: block;
        padding: 5px;
      }
      a:visited {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <a href="https://www.onitroad.com">onitroad</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>

带有未访问、已访问、悬停和活动链接的 :visited 选择器示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        font-size: 20px;
      }
      /* unvisited link */
      a:link {
        color: #cccccc;
      }
      /* visited link */
      a:visited {
        color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
        color: #8ebf42;
      }
      /* selected link */
      a:active {
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <p>Visit our
      <a href="https://www.onitroad.com/">website</a>.
    </p>
  </body>
</html>
日期:2020-06-02 22:14:51 来源:oir作者:oir