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. 【转】 iOS开发UI篇—控制器的View的创建

    最近对view的周期等还不是非常清楚,就找到顶哥的文章,非常不错,就搬运过来了. 原文: http://www.cnblogs.com/wendingding/p/3770760.html 一.6种创 ...

  2. Scene is unreachable due to lack of entry points and does not have an identifier for runtime access

    使用Storyboard时出现以下警告: warning: Unsupported Configuration: Scene is unreachable due to lack of entry p ...

  3. SpringMVC简单搭建与入门

    SpringMVC框架是spring框架的一个模块.springmvc和spring无需要通过中间整合层进行整合. 学习的时候,先了解一下流程至关重要,下面,简单介绍一下流程. 源码下载:http:/ ...

  4. 打包静默安装参数(nsis,msi,InstallShield,InnoSetup)[转]

    有时我们在安装程序的时候,希望是静默安装的,不显示下一步下一步,这编访问来教大家如何来操作,现在常用的制作安装程序的软件有,  Microsoft Windows Installer  , Windo ...

  5. windows批处理命令之ren

    1.批处理批量修改文件后缀名(假设我需要把一个文件夹中的很多txt文件改为sql文件): 1)在需要被处理的文件的文件夹里先新建一个txt文本,然后在文本中写入: ren *.txt *.sql 2) ...

  6. Thinkphp 文本编辑器

    文本编辑器:可以从网上下载---ueditor文件夹里面包含php和utf8-php两个文件夹 平时使用时主要用到获取内容和写入内容两个按钮 获取内容: <!DOCTYPE html PUBLI ...

  7. 手写 title 提示

    jquery实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  8. python3数据类型--数字

    数字 Python数字数据类型用于存储数值.数字数据类型是不允许改变的,所以如果改变数字数据类型的值,将重新分配内存空间. 以下实例在变量赋值时Number对象被创建: #!/usr/bin/env ...

  9. centos下安装cdh5

    http://www.aboutyun.com/thread-9075-1-1.html 基本参考这个   yum clean all yum update     1.保证selinux关闭  /e ...

  10. Linux文本操作三大利器总结：sed、awk、grep

    grep:(去除一行中需要的信息,同类与cut) grep全称是Global Regular Expression Print #常规用法 # grep -n root /etc/passwd :ro ...