CSS3有哪些新增的选择器?

最近浏览了一些有关CSS3的文章,总结了一下CSS3新增的选择器,不对的地方希望各位大牛们多多指导。

1、新增的选择器

属性选择器(除IE6外的大部分浏览器支持)

       E[att^="val"]  属性att的值以"val"开头的元素

       E[att$="val"]  属性att的值以"val"结尾的元素

       E[att*="val"]  属性att的值包含"val"字符串的元素

       实例:div[id^="nav"] {background:#000;}

结构伪类选择器(过滤选择器)

(注:FireFox 1.5/2.0/3.0 支持E:root,FireFox 3.0支持E:last-child、E:empty,由于IE6/7/8不支持,所以选择合适的场景用吧

序号 选择器 含义 实例
1E:root 匹配文档的根元素,对于HTML文档,就是HTML元素  
2E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1 p:nth-child(3) { color:#f00; }
3E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1 p:last-child { background:#ff0; }
4E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
5E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素  
6E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)  
7E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)  
8E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)  
9E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) p:only-child { background:#ff0; }
10E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)  
11E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素 p:empty { background:#ff0; }

UI状态伪类选择器(IE6/7/8不支持)

序号 选择器 含义 实例
1E:enabled 匹配表单中激活的元素  
2E:disabled 匹配表单中禁用的元素 input[type="text"]:disabled { background:#ddd; }
3E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素  
4E::selection 匹配用户当前选中的元素  

级元素通用选择器

序号 选择器 含义 实例
1E ~ F 匹配任何在E元素之后的同级F元素 p ~ ul { background:#ff0; }

反选伪类

序号 选择器 含义 实例
1E:not(s) 匹配不符合当前选择器的任何元素 :not(p) { border:1px solid #ccc; }

:target伪类
序号 选择器 含义 实例
1E:target 匹配文档中特定"id"点击后的效果  




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值