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. MESH

    本文由博主(YinaPan)原创,转载请注明出处:http://www.cnblogs.com/YinaPan/p/Unity_meshtest.html  A class that allows c ...

  2. 设计模式C++实现（1）——工厂模式

    该文章转载自: http://blog.csdn.net/wuzhekai1985 软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径.设计模式中运用了面向对象编程语言的重要特性:封装 ...

  3. Gson解析json繁杂数据

    碰到json数据.里面格式众多.list+string[]+等等.具体json参数如下: eg:以下为接口参数: "responseData":{ "brandCode& ...

  4. 插入数据显示 Duplicate entry '4913' for key 'user_id'

    提示信息翻译:插入4913 使索引重复 分析:索引如果是primary unique这两两种,那么数据表的数据对应的这个字段就必须保证其每条记录的唯一性.否则就会产生这个错误. 一般发生在对数据库写操 ...

  5. js变量声明与赋值以及函数声明

    if (!("a" in window)) { var a = 1; } alert(a); 结果:undefined 分析: 首先,所有的全局变量都是window的属性,语句 v ...

  6. Django - staticfiles，STATIC_ROOT， STATIC_URL，STATICFILES_DIRS

    staticfiles:这是一个静态资源管理的app,django.contrib.staticfiles.老的版本中,静态资源管理一直是一个问题,部分app发布的时候需要带上静态资源,在部署的时候必 ...

  7. select查询的性能

    为什么忘记commit也会造成select查询的性能问题 今天遇到一个很有意思的问题,一个开发人员反馈在测试服务器ORACLE数据库执行的一条简单SQL语句非常缓慢,他写的一个SQL没有返回任何数据, ...

  8. Hibernate的查询语言之HQL(二)——Hibernate查询的from字句

    from 是最简单的HQL语句,也是最基本的HQL语句.from 关键字后紧跟持久化类的类名.例如: from Person 表明从Person持久化类中取出全部的实例. 大部分时候,推荐位该Pers ...

  9. Expanding Rods

    http://poj.org/problem?id=1 #include<cstdio> #include<cstring> #include<cmath> #in ...

  10. KEIL C51之绝对地址定位

    单片机空间分配看*.M51文件,ARM,DSP空间分配看*.map文件 1.函数定位 假如要把C源文件 tools.c 中的函数 int BIN2HEX(int xx) { ... } 放在CODE ...