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. WPF命令

    WPF的命令是经常使用的,在MVVM中,RelayCommand更是用得非常多,但是命令的本质究竟是什么,有了事件为什么还要命令,命令与事件的区别是什么呢?MVVM里面是如何包装命令的呢?命令为什么能 ...

  2. Yii2的相关学习记录，初始化Yii2（二）

    前面已经将Yii2下载下来了,那我们就需要能实际的使用. 一.初始化,因为我都是在windows系统下,所以用cmd命令打开下载下来的Yii2的根目录.然后运行下面命令: init 会提示选择0为开发 ...

  3. 利用Php ssh2扩展实现svn自动提交到测试服务器

    1.安装ssh2扩展 (1)window . 下载 php extension ssh2 下载地址 http://windows.php.net/downloads/pecl/releases/ssh ...

  4. python学习第十八天 --文件操作

    这一章节主要讲解文件操作及其文件读取,缓存,文件指针. 文件操作 (1)文件打开:open(filepath,filemode) filepath:要打开文件的路径 filemode:文件打开的方式 ...

  5. Javascript中的onclick事件

    示例: <script type="text/javascript"> function onSubmit() { alert("保存数据"); } ...

  6. net core 依赖注入问题

    net core 依赖注入问题 最近.net core可以跨平台了,这是一个伟大的事情,为了可以赶上两年以后的跨平台部署大潮,我也加入到了学习之列.今天研究的是依赖注入,但是我发现一个问题,困扰我很久 ...

  7. springmvc参数类型转换三种方式

    SpringMVC绑定参数之类型转换有三种方式:     1. 实体类中加日期格式化注解      @DateTimeFormat(pattern="yyyy-MM-dd hh:MM&quo ...

  8. Java中String、StringBuffer、StringBuilder和toString的介绍

    作为一个刚接触java的小白,觉得字符串是个比较大的知识点,所以我把自己整理的一点笔记写成随笔,与园友一起分享,也请园友多多指出意见. 一.String类 1.字符串长度——length() Stri ...

  9. 使用GetLogicalProcessorInformation获取逻辑处理器的详细信息（NUMA节点数、物理CPU数、CPU核心数、逻辑CPU数、各级Cache）

    不过必须XP SP3以上才行.所有API大全: https://msdn.microsoft.com/en-us/library/windows/desktop/aa363804(v=vs.85).a ...

  10. 动态内存Treap

    注意root的v要给一个很奇怪的数,null的s是0. #include <cstdio> #include <iostream> #include <algorithm ...