CSS3新增选择器

CSS3新增选择器

元素关系选择器

选择器名称	示例	示例的意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	img后面紧跟着的p标签将被选中
通用兄弟选择器	p~span	p元素之后所有同层级的span元素

序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:only-child	选择唯一子元素
:only-of-type	选择属于其父元素唯一的某类型元素
:nth-child(3)	第3个子元素
:nth-of-type(3)	第3个某类子元素
:nth-last-child(3)	倒数第3个子元素
:nth-last-of-type(3)	倒数第3个某类型子元素

tips: 括号( )中是数字、关键词或公式。可以写成 an+b 的形式，表示从第 b 个开始，每 a 个选一个。也可以写成 odd ，表示选择第奇数个，even 表示偶数。

属性选择器

举例	意义
img[alt]	选择带有alt属性的img标签
img[alt=“湖南”]	选择alt属性是“湖南”的img标签
img[alt^=“湖南”]	选择alt属性以“湖南”开头的img标签
img[alt$=“湖南”]	选择alt属性以“湖南”结尾的img标签
img[alt*=“美”]	选择alt属性含有“美”字的img标签
img[alt~=“湖南”]	选择alt属性中有空格隔开的“湖南”一词的img标签
img[alt|=“湖南”]	选择alt属性以“湖南-”开头的img标签

CSS3新增伪类及伪元素

选择器	例子	例子描述
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）
:checked	input:checked	选择每个被选中的 <input> 元素
:enabled	input:enabled	选择每个启用的 <input> 元素
:enabled	input:disabled	选择每个被禁用的 <input> 元素
:root	:root	选择文档的根元素（即html标签）
::selection	::selection	选择用户已选取的元素部分
:target	#news:target	选择当前活动的 #news 元素