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

左岸

web前端

 
 
 

日志

 
 

css3——选择器(三):伪类选择器  

2014-07-28 11:58:25|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一、动态伪类:爱恨原则LoVe/HAte,也就是Link--visited--hover--active外加:focus
1、:link  
      链接没被访问时。
2、:visited
      链接被访问过后。
3、:hover
     鼠标悬浮于链接上时。
4、:active
     鼠标激活链接时。
5、:focus
    元素成为焦点时。
对于:hover在IE6下只有a元素支持,:active只有IE7-6不支持,:focus在IE6-7下不被支持。
二、UI元素状态伪类:
1、:checked
      匹配所有用户界面(form表单)中处于选中状态的元素E。
2、:enabled
     匹配所有用户界面(form表单)中处于可用状态的E元素。
3、:disabled
     匹配所有用户界面(form表单)中处于不可用状态的E元素。
4、::selection
    匹配E元素中被用户选中或处于高亮状态的部分,只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。
IE6-8不支持":checked",":enabled",":disabled","::selection”这四种选择器。

三、结构性伪类:
1、:first-child
     选择某个元素的第一个子元素。

IE6不支持:first-child选择器。

2、:last-child
     选择是的元素的最后一个子元素。
IE6不支持:first-child选择器。
3、:nth-child(n)
    选择某个元素的中第n个子元素,n可以改为表达式 选择多个子元素,n不能为负值。

IE6-8和FF3-浏览器不支持":nth-child"选择器。

4、:nth-last-child(n) 
     选择某个元素的中倒数第n个子元素。
IE6-8和FF3-浏览器不支持
5、:nth-of-type(n)
      选择同类型中的第n个同级兄弟元素。
IE6-8和FF3-浏览器不支持
6、:nth-last-of-type(n) 
     选择同类型中的倒数第n个同级兄弟元素。
IE6-8和FF3-浏览器不支持
7、:first-of-type
    类似于:first-child 只是指定了元素类型,一个上级元素下的第一个同类子元素
IE6-8和FF3-浏览器不支持
8、:last-of-type
     类似于:last-child 只是指定了元素类型,一个上级元素下最后一个同类子元素
IE6-8和FF3-浏览器不支持
9、:only-child
    选择父元素中唯一子元素
IE6-8浏览器不支持
10、:only-of-type
      选择父元素中唯一一个相同类型的子元素;
IE6-8和FF3-浏览器不支持
11、:empty
    选择的元素里面没有任何内容
IE6-8浏览器不支持
12、:root
      选择文档的根元素。在HTML中,根元素永远是HTML
IE6-8浏览器不支持

四、否定伪类:
 :not
选择所有不匹配该选择符的元素。
IE6-8浏览器不支持

五、伪元素:
CSS中的伪元素有:first-line,:first-letter,:before,:after,在CSS3中增加了一个“:”,变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”。两个“::”和一个“:”css3中主要用来区分伪类和伪元素。
1、::first-line
     选择元素的第一行
2、::first-letter
     选择文本块的第一个字母
3、::before和::after
     这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动,

六、目标伪类:
:target 
匹配相关URL指向的元素
IE6-8浏览器不支持









  评论这张
 
阅读(20)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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