• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :visited

    定义和用法

    • :visited,访问过的链接。
    • :visited,是一个伪类,并且它适用于到已经访问的另一资源的超链接。
    • :visited,适用于指向已访问的URL的链接,访问URL是链接点显示在用户代理的历史记录中的网址。
    • :visited,此状态与:link状态互斥。

    语法:

    :link

    设置超链接<a>在其链接地址已被访问过时的样式。

    • 如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问。这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现
    • 超链接的4种状态,需要有特定的书写顺序才能生效。超链接状态顺序::link:visited:hover:active注意:hover必须位于:link:visited之后,:active必须位于:hover之后

    限制

    出于隐私原因,浏览器严格限制您可以让此伪类应用的样式,以及使用它们的方式:

    浏览器支持

    所有浏览器都支持

    例子

    /* 所有被访问过的 <a> 变绿 */
    
    a:visited {color: green;}
    

    未设置颜色或透明的属性不能使用:visited。在可以使用此伪类设置的属性中,浏览器可能只有colorcolumn-rule-color两个默认值。因此,对于其他属性,在使用:visited选择器前,应该先为这些属性设置基础样式。

    //HTML
    <a href="#test-visited-link">你是否访问过此链接?</a>
    <a href="">你已经访问过此链接。</a>
    
    
    //CSS
     /* 指定某些属性的默认值,允许他们使用:visited状态进行样式设置 */ 
    
    a { 
    
     background-color: white; 
      border: 1px solid white; 
    }
     
    
    a:visited { 
      background-color: yellow; 
      border-color: hotpink;
      color: hotpink;
    }
     
    

    上篇::link

    下篇::hover