CSS3新增选择器

1.属性选择器

选择符	简介
E[attr]	选择具有attr属性的E元素
E[attr="val"]	选择具有attr属性且属性值等于val的E元素
E[attr^="val"]	匹配具有attr属性且属性值以val开头的E元素
E[attr$="val"]	匹配具有attr属性且属性值以val结尾的E元素
E[attr*="val"]	匹配具有attr属性且属性值中含有val的E元素
注意：
类选择器、属性选择器、伪类选择器，权重为0，0，1，0

 

2.结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child(n)	匹配父元素中第n个子元素E n可以是数字、关键字和公式 常见的关键字有even偶数 odd奇数 常见的公式如下（如果n是公式，则从0开始计算） 但是第0个元素或者超粗了元素的个数会被忽略
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

注意:类选择器、属性选择器、伪类选择器，权重为0，0，1，0

 nth-child(n)公式

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15...
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第五个）

3.伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容
注意：

• before和after必须有content属性
• before在内容的前面，after在内容的后面
• before和after创建一个元素，但是属于行内元素
• 因为在dom里面看不见刚才创建的元素，所以称为伪元素
• 伪元素和标签选择器一样，权重为0，0，0，1