美文网首页
简单的链接样式

简单的链接样式

作者: December1224 | 来源:发表于2019-03-30 16:43 被阅读0次

    对链接应用样式最容易的方式是使用锚类型选择器。例如,以下规则使所有锚显示为红色:

    a {color : red;}
    

    但是,锚可以作为内部引用,也可以作为外部链接,所以使用类型选择器不总是理想的。为了避免这个问题,CSS提供了两个特殊的选择器,称为链接伪类选择器。:link伪类选择器用来寻找没有被访问过的链接, :visited伪类选择器用来寻找被访问过的链接。所以,在下面的示例中,所有没有被访问过的链接将是蓝色的,所有被访问过的链接将是绿色的:

    a:link {color : blue}
    a:visited  {color : green}
    

    可以用来对链接应用样式的另外两个选择器是 :hover和 :active动态伪类选择器。
    :hover动态伪类选择器用来寻找鼠标悬停处的元素,:active动态伪类选择器用来寻找被激活的元素。对于链接来说,激活发生在链接被单击时。所以,在下面的示例中,当鼠标悬停在链接上或单击链接时,链接将变成红色:

    a:hover, a:active {color: red;}
    

    为了尽可能提高页面的可访问性,在定义鼠标悬停状态时,最好在链接上添加 :focus伪类。在通过键盘移动到链接上时,这让链接显示的样式与鼠标悬停时相同。

    a:hover, a:focus {color: red;}
    

    其他元素也可以使用 :hover、 :active或 :focus伪类选择器。

    相关文章

      网友评论

          本文标题:简单的链接样式

          本文链接:https://www.haomeiwen.com/subject/abcsbqtx.html