link       未点时链接色
visited  已点过的链接色
hover   光标放入链接上的色
active   点击时的样式

顺序一定要按link、visited、hover、active来设置

1)普通形式
a:link{}
a:visited{}
a:hover{}
a:active{}

<a href="...">...</a>

2)单个class
a.clsname{}
a.clsname:link{}
a.clsname:visited{}
a.clsname:hover{}
a.clsname:active{}

<a href="..."  class="clsname">....</a>

3)容器class
.cls a:link{}
.cls a:visited{}
.cls a:hover{}
.cls a:active{}

<div class="cls">
  <a href="">...</a>
</div>

4)ID的形式
#idname a:link{}
#idname a:visited{}
#idname a:hover{}
#idname a:active{}

<div id="idname">
    <a href="...">....</a>
</div>

css中链接的4个状态 link、visited 、hover、active 顺序与设置的更多相关文章

  1. CSS:a:link;visited;hover;active解释及正确顺序

    a:link 选择器设置指向普通的.未被访问页面的链接的样式, a:visited 选择器用于设置指向已被访问的页面的链接, a:active 选择器用于活动链接, a:hover 选择器用于选择鼠标 ...

  2. a:link visited hover active

    CSS中a:link.a:visited.a:hover.a:active的用法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页设计中,设计美观的超链接效果可以增强网站的用户体验,可能会 ...

  3. 超链接标签的CSS伪类link,visited,hover,active

    CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...

  4. [CSS3] Interactive Pseudo-Classes :link :visited :hover :active

    The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what ele ...

  5. 关于link, visited, hover, active

    LoVe/HAte 如果只是希望点击的时候显示背景色,那么只需要设置 :active,无需设置:hover #navbar:active, #backbtn:active { background-c ...

  6. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...

  7. CSS中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)

    我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...

  8. css中 禁止spa有点击状态

    <span class="an" onclick="selNum();"></span> var selNum = function() ...

  9. 关于css中a标签的样式

    CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited :hover : ...

随机推荐

  1. uva 10710 快速幂取模

    //题目大意:输入一个n值问洗牌n-1次后是不是会变成初始状态(Jimmy-number),从案例可看出牌1的位置变化为2^i%n,所以最终判断2^(n-1)=1(mod n)是否成立#include ...

  2. 【HDOJ6225】Little Boxes(Java)

    题意:输入整数a,b,c,d,输出他们的和 a, b, c, d ≤ 2^62 思路:ANS可能会炸long long 队友直接上Java import java.math.BigInteger; i ...

  3. Laravel 5.1 报错:[App\Http\Requests\Request] is not instantiable

    Laravel 5.1 报错:[App\Http\Requests\Request] is not instantiable 错误提示: Whoops, looks like something we ...

  4. Redis数据结构之整数集合

    整数集合是Redis用于保存整数值的集合抽象数据结构,它可以保存类型为int16_t .int32_t或者int64_t的整数值,并且保证集合中不会出现重复元素. 一.整数集合数据结构定义 参数说明: ...

  5. android中bitmap图片与二进制,String间的转化

    1, public Bitmap stringtoBitmap(String string) {                 // 将字符串转换成Bitmap类型                 ...

  6. Delphi中Indy 10的安装和老版本的卸载

    http://www.cnblogs.com/railgunman/archive/2010/08/31/1814112.html Indy 10的安装和老版本的卸载 Indy 10下载地址: htt ...

  7. Loj #6307. 「雅礼国庆 2017 Day1」Clique

    link: https://loj.ac/problem/6307 最大团转补图的独立集,这样的话只有r[x]<l[y]或者r[y]<l[x],x和y才能连边,所以排序之后乱搞就行了. 需 ...

  8. Java中jshell脚本

    1.当所编写的代码量少时,倘若要按照步骤会显得繁琐,可直接用JDk当中的jshell,进入cmd,输入jshell,即进入jshell脚本交互模式.省去繁琐的定义类,main方法,可直接输出Syste ...

  9. BUPT复试专题—找K小数(2011)

    https://www.nowcoder.com/practice/204dfa6fcbc8478f993d23f693189ffd?tpId=67&tqId=29637&rp=0&a ...

  10. php编译安装后,加扩展模块

    1.进入php源码包中,找到需要安装的扩展模块目录. cd /root/php-5.6.26/ext/mbstring 2.在扩展模块目录,运行phpize程序. /usr/local/bin/php ...