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. mac在 aliyun linux ecs实例上安装 jdk tomcat mysql

    用了一个ftp 工具 把 gz rpm 等 传递到ecs 上 -- 用这个Transmit 用ssh远程登录,然后依次安装 jdk tomcat  mysql 到 /usr/local/... 设置环 ...

  2. 合理计划 dictionary cache 大小

    [数据字典缓冲区(Data Dictionary Cache)  ] 用于存放Oracle系统管理自身所需要的所有信息,包括登录的用户名.用户对象.权限等. 查看 data dictionary ca ...

  3. 解决jQuery插件sliderjs, 点击插件分页,导航按钮后不能重新开始.

    jQuery SlidesJS - Can't restart animation after clicking on navigation or pagination <!DOCTYPE ht ...

  4. Windows Phone 使用 WriteableBitmap后台生成图片

    这几天项目是遇到一个需求,需要后台把几个元素生成到一张图片上,并保存到文件中 private void cutscreen_Click(object sender, EventArgs e) { Gr ...

  5. POJ3274 hash

    POJ3274 问题重述: 已知有n头牛,用一个K位二进制数Ak,Ak-1,...,A1表示一头牛具有的特征,Ai=1表示具有特征i.现给定按顺序排列的N头牛的k位特征值,称某个连续范围内“特征平衡” ...

  6. 【行为型】Memento模式

    备忘录模式顾名思义就是一种能有备忘作用的设计模式,其目的是在对象外部保存其在某一时刻的状态信息,并且在任何需要的时候,都可以通过备忘录中保存的状态数据恢复对象在当时情形下的状态. 备忘录模式旨在对象的 ...

  7. Python自动化运维之21、CSS

    一.css简介 CSS 是 Cascading Style Sheets的缩写,称为层叠样式表,用来设计网页的样式布局,以及大小来适应不同的屏幕等,使网页的样式和网页数据分离, 二.导入css 导入c ...

  8. Memcached源码分析——slab的初始化

    以下内容仅为本人的笔记. /** * Determines the chunk sizes and initializes the slab class descriptors * according ...

  9. 初谈使用Spring的感受

    我记得刚开始学Spring的时候,只是很自然的把它当做一个类似其他J2EE的框架来学习.那时候学Spring很大一部分是为了以后面试需要,因为毕竟搞Java的,你说不会Spring这都有点说不过去.当 ...

  10. Matlab 数理统计

    1.离散随机分布 超几何分布:M:产品总数;K:次品数;N:抽样数. hygepdf(X, M,K,N):计算超几何分布的密度. 例:hygepdf(1,10,1,3),执行结果为ans=0.3000 ...