CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究。
:link 与 :visited 在样式文件中的顺序可以随便放置。
而focus, hover,active这几个,如果你设置的顺序不同,会直接影响样式的显示效果,下面会详细解释。
:focus -> :hover -> :active
有些人可能会困惑,为什么必须要按这样的顺序,而不能打乱呢? 其实他们每一个选择器都代表一个含义。
:link代表为访问链接的样式,所以只要你是超链接,且未被访问过,则链接都会按照你设定的样式显示,所以它的位置顺序无所谓。
:visited代表链接访问后的样式,则链接一旦被访问,则之后它的样式就会是你所设置的visited样式
重点是下面这几个:
:focus 代表的是获取焦点时的样式,有人说啥是获取焦点时的样式,这个我们可以通过tab键来查看,一旦链接获取了焦点,则它的样式就是你设置的focus样式。
:hover 代表的是你光标经过某一元素时的样式,如果将此样式放在:focus之后,则当链接获取焦点时,显示:focus样式,当光标经过此链接时,会显示hover的样式,因为hover排在后,会覆盖focus样式。
如果:hover排在前,:focus排在后,则当光标获得焦点时显示:focus的样式,但当光标经过链接时,样式并未显示:hover的样式,而是继续是:focus的样式,因为应用的focus样式在hover之后,覆盖了前面的样式。
测试代码如下:
a:focus{ color:#AA80FE; text-decoration:underline; } color:#FF0000; text-decoration:underline; } |
a:hover{ color:#FF0000; text-decoration:underline; } color:#AA80FE; text-decoration:underline; } |
:active 代表元素被激活时的样式,也就是元素被按下时的样式,如果:active选择器与 :focus , :hover 调换位置,则显示的效果也会不同,因为排在后面的样式,会覆盖前面的样式。
测试代码如下:
a:hover{ color:#FF0000; text-decoration:underline; } a:active{ color:#FFCC00; } |
a:active{ color:#FFCC00; } color:#FF0000; text-decoration:underline; } |
你可能会问,css是层叠样式表,那是不是就意味着写在后面的样式一定会覆盖前面的样式呢?
大家可以看另一篇教程:《CSS中选择器优先级顺序实战讲解》
欢迎大家加入互联网技术交流群:62329335
个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。
相关推荐
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的... TEXT-DECORATION: none } A:visited { COLOR: #000000; TEXT-DE
link、visited、hover、active 未移入a标签链接时:link 移入a标签链接时:link、hover 点击a标签链接时:link、hober、active 点击后未移入a标签连接时:link、visited 点击后移入a标签连接时:link、visited...
css设置超链接样式是通过伪类来实现的 ...复制代码代码如下: a:link {} a:visited {} a:hover {} a:active {} 伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才
/* ...*/ body { margin: 0; padding: 0; line-height: 1.5em;... font-family: Verdana, Arial, san-...a:active, a:hover { color: #f5ea01; text-decoration: underline; } p { margin: 0px; padding: 0px; }
a:active 链接伪类 超链接标记的伪类 含义 a:link{ CSS样式规则; } 未访问时超链接的状态 a:visited{ CSS样式规则; } 访问后超链接的状态 a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态 a:active{ CSS样式...
a标签样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态。...③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 .mycls a:active{color:blue} ④ a:hover:鼠标移到链接上时 ,如 .m
伪类选择符包括:总: a 表示所有状态下的连接 如 .mycls a{color:red}① a:link:未访问链接 ,如 .mycls a:link {color:blue}② a:visited:已访问链接 ,如 .mycls a:visited{color:blue}③ a:active:激活时(链接...
A:active {color: red;} a:link { text-decoration: none } a:acitve { text-decoration: none } a:visited { text-decoration: none } body { background-color:white;font-size: 16pt } p { font-size: 16pt } ...
CSS提供了四种伪类设置链接的颜色,包括:link、:visited、:hover、:active,它们的声明是有一定顺序的,我们将这种顺序简称为L-V-H-A,即link最先,其次visited,之后hover,最后active,如此声明才能保证hover与...
a:link,a:visited{ color:#FC0; text-decoration:none; /*清除超链接默认的下划线*/ margin-right:20px; } a:hover{ color:#0F0; text-decoration:underline; /*鼠标悬停时出现下划线*/ } a:active{ color:#F00;} ; ...
常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active` 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 提示:在 CSS 定义中,a:active 必须被置于 a...
#nav .n02 a:active { background-position:-118px -76px; } #nav .n03 a:link { background-position:-235px 0; } #nav .n03 a:visited { background-position:-235px -114px; } #nav .n03 a:hover { background-...
③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue} ④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue} 一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。 前三者...
a:hover 鼠标放在链接上未点击 a:active 是介于hover visited 之间的一个状态,可以说是链接被按下时候的状态 大家都知道想要设置统一的连接样式,只要在css文件中设置a:link,a:visited,ahover,a:active就行了。...
#base { OVERFLOW: hidden; WIDTH: 215px; POSITION: relative; HEIGHT: 40px } #cover { VISIBILITY: hidden; OVERFLOW: hidden; WIDTH: 215px; POSITION: absolute;...A:link { ...A:visited { ...A.z:active {
A:link,A:active,A:visited{TEXT-DECORATION:none ;Color:#3C2F1D} A:hover{TEXT-DECORATION: underline;Color:#4455aa} BODY{ FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: 宋体; background-color: #ECF5FF...
cssdemo.css样式表文件内容: .font_style { font-family: "宋体"; font-size: 24px; } body{ font-family:"宋体","Times New Roman"; background-color:#CCCCCC;...a:active { text-decoration: none; } 包含CSS样式
a:active { text-decoration: underline } FORM { padding:0px margin:0px } .CONTENT { overflow:auto word-break:break-all word-wrap:break-word } .HREF { cursor:pointer } TABLE.TableFixed { table-layout...
例如定义了链接主样式如下: A:link { color:#FFFFFF; text-decoration:none }A:active { color:#FFFFFF; text-decoration:none }A:....myClass:link { color:#000000 }.myClass:active { color:#000000 }.myClass:vi