注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

css伪类选择器书写顺序  

2014-06-26 12:30:28|  分类: CSS小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天咱们上课讲到了css伪类选择器,在这里我为大家总结一下相关的知识点。

一.知识点简介
link:  未被访问的链接。
visited:被访问过后的链接。
hover:  鼠标指针移动到元素上方时的状态。
active: 链接被按下时的状态。

二.书写顺序
不知道大家注意到没有,在这里其实有一个书写顺序问题。当你的四条属性书写顺序不正确时,他们会出现样式被覆盖的尴尬问题。咱们看个小例子。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a{
font-size: 40px;
font-weight: bolder;
}
a:link{
color: black;
}

a:visited{
color: yellow;
}
a:hover{
color: blue;
}
a:active{
color: green;
}

</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

css伪类选择器书写顺序 - 淡淡De影痕 - 淡淡De影痕的博客 css伪类选择器书写顺序 - 淡淡De影痕 - 淡淡De影痕的博客 css伪类选择器书写顺序 - 淡淡De影痕 - 淡淡De影痕的博客 css伪类选择器书写顺序 - 淡淡De影痕 - 淡淡De影痕的博客
  link                                 visited hover  active
我为四种状态分别设置了不同的颜色,现在是没有任何问题的。那么咱们把hover放到link的前面会怎么样呢?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a{
font-size: 40px;
font-weight: bolder;
}
a:hover{
color: blue;
}
a:link{
color: black;
}

a:visited{
color: yellow;
}
a:active{
color: green;
}

</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

这时我们会发现hover效果失效了。为什么呢?咱们来分析一下。首先要知道一个常识,当浏览器加载css样式时,如果遇到相同的属性或状态时浏览器会选择后面的一条加载出来。比如我为div1设置了一个宽度width:100px,在后面我又为他设置宽度width:200px;那么最终浏览器会加载width:200px显示出来。这个hover的bug也是同理,当你鼠标移到链接上方时,它既满足了hover状态同时也满足link状态。所以浏览器选择加载了位于css位置靠后的link属性。
说了这么多其实咱们只要把四属性的属性书写顺序写对就行了。
正确的书写顺序为:a:link,  a:visited,  a:hover,  a:active
还有个好记的方法:Love   Hate

欢迎大家交流指正~  淡淡De影痕

 


  评论这张
 
阅读(82)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018