The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what elements on the page are interactive and that they can use them to navigate the website.

Order is important: order -- link, then visited, then hover, then active.

a {

  text-decoration: none;

}

a:link {

  color: blue;

}

a:visited {

  color: purple;

}

a:hover {

  text-decoration: underline;

}

a:active {

  border: 1px solid;

}
<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="link.css">

</head>

<body>

  <ul>

    <li><a href="http://egghead.io">Egghead</a></li>

    <li><a href="http://garthdb.com">Garth Braithwaite</a></li>

    <li><a href="http://google.com">Google</a></li>

    <li><a href="http://fakewebsite.notreal">Not a Website</a></li>

    <li><button>Click it!</button></li>

    <li><a id="named-anchor">Named Anchor</a></li>

  </ul>

</body>

</html>

[CSS3] Interactive Pseudo-Classes :link :visited :hover :active的更多相关文章

  1. a：link visited hover active

    CSS中a:link.a:visited.a:hover.a:active的用法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页设计中,设计美观的超链接效果可以增强网站的用户体验,可能会 ...

  2. CSS:a:link;visited;hover;active解释及正确顺序

    a:link 选择器设置指向普通的.未被访问页面的链接的样式, a:visited 选择器用于设置指向已被访问的页面的链接, a:active 选择器用于活动链接, a:hover 选择器用于选择鼠标 ...

  3. 超链接标签的CSS伪类link,visited,hover,active

    CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...

  4. 关于link, visited, hover, active

    LoVe/HAte 如果只是希望点击的时候显示背景色,那么只需要设置 :active,无需设置:hover #navbar:active, #backbtn:active { background-c ...

  5. :link,:visited,:focus,:hover,:active详解

    原文::link,:visited,:focus,:hover,:active详解 CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究.   ...

  6. a标签伪类link，hover，active，visited，focus区别

    <div id="content"> <h3><a class="a1" href="#">a标签伪类l ...

  7. 【CSS】Intermediate2:Pseudo Classes

    1.specify a state or relation to the selector selector:pseudo_class { property: value; } 2.Link 3.Dy ...

  8. CSS pseudo classes All In One

    CSS pseudo classes All In One CSS 伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes ...

  9. [CSS3] Identify Interactive HTML Elements with CSS Link Pseudo Classes

    The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what ele ...

随机推荐

  1. Oracle增加自增长列

    -- 移除索引drop index TB_1;drop index TB_2 ;alter table TB drop constraint PK_TB; --允许列为空 alter table TB ...

  2. iOS横竖屏切换的一些坑（持续更新）

    最近在做视频类的App,遇到视频滚动播放的坑,紧接着就是横竖屏问题.之前太过天真不想做横竖屏配置.只是想旋转视频View,但是分享什么的包括AlertView还是竖屏样式,项目着急上线(1周提交一次也 ...

  3. 二、C# 数据类型

    C#语言的基本类型包括8种整数类型.2种用于科学计算的二进制浮点类型.1种用于金融计算的十 进制浮点类型.1种布尔类型以及1种字符类型. 2.1 基本数值类型 C#中的基本数据类型都有关键字和它们关联 ...

  4. 转型函数 Boolean()

    布尔值有2种可能的值true和false;但 ECMAScript中所有类型的值都有与这两个 Boolean 值 等价的值.要将一个值转换为其对应的 Boolean 值,可以调用转型函数 Boolea ...

  5. 深入Java虚拟机读书笔记第三章安全

    为什么需要安全性 Java的安全模型是其多个重要结构特点之一,它使Java成为适于网络环境的技术.Java安全模型侧重于保护终端用户免受从网络下载的.来自不可靠来源的.恶意程序(以及善于程序中的bug ...

  6. window.showModalDialog以及window.open用法简介

    .可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象.例如:------------------------------parent.htm<script& ...

  7. $_GLOBALS超全局数组和global定义的全局变量区别？

    全局变量:主程序中定义的变量(函数外部),只能在主程序中使用,在函数内部不能调用 背景:解决在函数内部调用全局变量的问题 解决方法: 1.在函数内部声名全局变量 <?php public $va ...

  8. phalcon的一些中文手册和帮助文档地址收集

    1:中文官方网站:http://phalconphp.com/zh/ 挺好可以好好看文档 可安装http://bullsoft.org/phalcon-docs/这个去查找,这是个部分中文的手册! P ...

  9. 为UITableViewController瘦身

    在IOS开发中采用了MVC得模式,ViewController通常是最庞大的文件,里面包含了各种各样的大概,造成代码的复用率低下,可读性也降低,那么有什么办法来解决这个问题呢. 在创建Table的时候 ...

  10. 转：Thumbs.db是什么文件？是病毒吗？怎么处理？

    今天有朋友兴冲冲的问我,Thumbs.db是什么文件?是病毒吗?会不会对电脑产生危害. 很多朋友对Thumbs.db这个文件不了解,会以为是病毒,实际上并非如此.那么,Thumbs.db是什么文件?有 ...