css中链接的4个状态 link、visited 、hover、active 顺序与设置
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 顺序与设置的更多相关文章
- CSS:a:link;visited;hover;active解释及正确顺序
a:link 选择器设置指向普通的.未被访问页面的链接的样式, a:visited 选择器用于设置指向已被访问的页面的链接, a:active 选择器用于活动链接, a:hover 选择器用于选择鼠标 ...
- a:link visited hover active
CSS中a:link.a:visited.a:hover.a:active的用法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页设计中,设计美观的超链接效果可以增强网站的用户体验,可能会 ...
- 超链接标签的CSS伪类link,visited,hover,active
CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...
- [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 ...
- 关于link, visited, hover, active
LoVe/HAte 如果只是希望点击的时候显示背景色,那么只需要设置 :active,无需设置:hover #navbar:active, #backbtn:active { background-c ...
- css中按钮的四种状态
css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...
- CSS中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)
我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...
- css中 禁止spa有点击状态
<span class="an" onclick="selNum();"></span> var selNum = function() ...
- 关于css中a标签的样式
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited :hover : ...
随机推荐
- uva 10710 快速幂取模
//题目大意:输入一个n值问洗牌n-1次后是不是会变成初始状态(Jimmy-number),从案例可看出牌1的位置变化为2^i%n,所以最终判断2^(n-1)=1(mod n)是否成立#include ...
- 【HDOJ6225】Little Boxes(Java)
题意:输入整数a,b,c,d,输出他们的和 a, b, c, d ≤ 2^62 思路:ANS可能会炸long long 队友直接上Java import java.math.BigInteger; i ...
- 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 ...
- Redis数据结构之整数集合
整数集合是Redis用于保存整数值的集合抽象数据结构,它可以保存类型为int16_t .int32_t或者int64_t的整数值,并且保证集合中不会出现重复元素. 一.整数集合数据结构定义 参数说明: ...
- android中bitmap图片与二进制,String间的转化
1, public Bitmap stringtoBitmap(String string) { // 将字符串转换成Bitmap类型 ...
- Delphi中Indy 10的安装和老版本的卸载
http://www.cnblogs.com/railgunman/archive/2010/08/31/1814112.html Indy 10的安装和老版本的卸载 Indy 10下载地址: htt ...
- Loj #6307. 「雅礼国庆 2017 Day1」Clique
link: https://loj.ac/problem/6307 最大团转补图的独立集,这样的话只有r[x]<l[y]或者r[y]<l[x],x和y才能连边,所以排序之后乱搞就行了. 需 ...
- Java中jshell脚本
1.当所编写的代码量少时,倘若要按照步骤会显得繁琐,可直接用JDk当中的jshell,进入cmd,输入jshell,即进入jshell脚本交互模式.省去繁琐的定义类,main方法,可直接输出Syste ...
- BUPT复试专题—找K小数(2011)
https://www.nowcoder.com/practice/204dfa6fcbc8478f993d23f693189ffd?tpId=67&tqId=29637&rp=0&a ...
- php编译安装后,加扩展模块
1.进入php源码包中,找到需要安装的扩展模块目录. cd /root/php-5.6.26/ext/mbstring 2.在扩展模块目录,运行phpize程序. /usr/local/bin/php ...