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. asp.net 读取sql存储过程返回值

    关于Exec返回值的问题有很多,在这做个简要的总结. 读查询语句示例:    Declare @count int     select @Count 要点:                      ...

  2. CSS 布局Float 【0】

    float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...

  3. 在SpringMVC框架下建立Web项目时web.xml到底该写些什么呢？

    刚刚初学Spring MVC,却连一个简单的helloworld都搞的懵懵懂懂的,配置文件搞不清,各种文件之间的逻辑关系也不懂,连续看了好些日子的Spring MVC了,今天终于下定决心,每天记录一点 ...

  4. nodejs读取本地txt文件并输出到浏览器

    var fs = require('fs'); var chrome=""; //同步执行 function tongbu(){ var data =fs.readFileSync ...

  5. C# Word

    C# 操作word文档 1.c#操作word 在指定书签插入文字或者图片  1using Word = Microsoft.Office.Interop.Word; 2 3object Nothing ...

  6. websphere节点、单元、服务之间的关系

    单元(cell).节点(node).概要文件(profile).服务(server) 在websphere集群(ND版本)模式下: 一个cell单元可以包含多个node节点,node=profile, ...

  7. php 使用phpqrcode类生成带有logo的二维码 使logo不失真（透明）

    在开发中 发现phpqrcode类在加入logo时,如果 logo 是 png 图像带有透明区域时,二维码上都无法正常完美的显示出来 解决方法便是:修改phpqrcode文件中的 QRimage类下的 ...

  8. MySql存储过程—2、第一个MySql存储过程的建立

    看看如何创建一个存储过程.虽然通过命令行可以创建,但基本通过MySQL提供的Query browser来创建. 1.首先我们通过Administrator在test数据库中创建一个简单的表名叫”pro ...

  9. forever 使用

    安装: $npm install -g forever y@y:ydkt$ forever start server/app.js warn: --minUptime not set. Default ...

  10. SCALA中的函数式编程

    演示了值函数,匿名函数,闭包... 其它具体的应用,还得在生产当中吧.. 这个告一段落..其它SAM,CURRY,高阶函数,集合,泛型,隐式类..这些,还是找专门的书去深入了解啦... C:\User ...