您好,欢迎访问一九零五行业门户网

css3新增选择器有哪些

css3选择器有:“[att^=val]”、“[att$=val]”、“[att*=val]”、“:root”、“:nth-child(n)”、“:last-child”、“:only-child”、“:empty”等等。
本教程操作环境:windows7系统、css3&&html5版、dell g3电脑。
css3新增的选择器
属性选择器(除ie6外的大部分浏览器支持)
       e[att^=val]  属性att的值以val开头的元素
       e[att$=val]  属性att的值以val结尾的元素
e[att*=val]  属性att的值包含val字符串的元素
       实例:p[id^=nav] {background:#000;}
结构伪类选择器(过滤选择器)
(注:firefox 1.5/2.0/3.0 支持e:root,firefox 3.0支持e:last-child、e:empty,由于ie6/7/8不支持,所以选择合适的场景用吧)
序号选择器含义实例
1 e:root 匹配文档的根元素,对于html文档,就是html元素  
2 e:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1 p:nth-child(3) { color:#f00; }
3 e:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1 p:last-child { background:#ff0; }
4 e:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
5 e:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素  
6 e:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)  
7 e:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)  
8 e:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)  
9 e:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) p:only-child { background:#ff0; }
10 e:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)  
11 e:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素 p:empty { background:#ff0; }
ui状态伪类选择器(ie6/7/8不支持)
序号选择器含义实例
1 e:enabled 匹配表单中激活的元素  
2 e:disabled 匹配表单中禁用的元素 input[type=text]:disabled { background:#ddd; }
3 e:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素  
4 e::selection 匹配用户当前选中的元素
级元素通用选择器
序号选择器含义实例
1 e ~ f 匹配任何在e元素之后的同级f元素 p ~ ul { background:#ff0; }
反选伪类
序号选择器含义实例
1 e:not(s) 匹配不符合当前选择器的任何元素 :not(p) { border:1px solid #ccc; }
:target伪类
序号选择器含义实例
1 e:target 匹配文档中特定id点击后的效果
(学习视频分享:css视频教程)
以上就是css3新增选择器有哪些的详细内容。
其它类似信息

推荐信息