CSS3 选择器

CSS3 选择器

1.同级元素通用选择器  

 E~F

匹配任何在 E 元素之后的同级 F 元素

<div></div>

<span></span>

 Div与span同级,当用E~F时,选择与div同级的span

 

2、属性选择器

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

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

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

3、伪类选择器

与用户界面相关的伪类

选择器

描述

示例

E:enabled

匹配表单中激活的元素

input[type="text"]:enabled { background:#ddd;}

E:disabled

匹配表单中禁用的元素

 

E:checked

匹配表单中被选中的radio(单选框)或checkbox(复选框)元素

 

E:selection

匹配用户当前选中的元素

 

 

结构性伪类

选择器

格式

E: root

匹配文档的根元素,对于HTML文档,就是HTML元素

E: nth-child(n)

匹配其父元素的第n个子元素,第一个编号为1

E: nth-last-child(n)

匹配其父元素的倒数第n个子元素,第一个编号为1

E: last-child

匹配父元素的最后一个子元素,等同于:nth-last-child(1)

E:nth-of-type(n)

与:nth-child()作用类似,但是仅匹配使用同种标签的元素

E:nth-last-of-type(n)

与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素

E:first-of-type

匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)

E:last-of-type

匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)

E:only-child

匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

E:only-of-type

匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

E:empty

匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

                            注:nth-child(2n) / nth-child(2n+1)  用于选取奇数或偶数元素,同样适用

 

 

反选伪类选择器

E:not(s)

匹配当前不符合当前选择器的任何元素

CSS3 选择器,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。