随手记—CSS3选择器

属性选择器：

选择符	说明
E [ att ]	选择具有att属性的E元素
E [ att=“val” ]	选择具有att属性，且属性值为val的E元素
E [ att^=“val” ]	匹配具有alt属性，且值以val开头的E元素
E [ att$=“val” ]	匹配具有alt属性，且值以val结尾的E元素
E [ att*=“val” ]	匹配具有alt属性，且值含有val开头的E元素

类选择器、属性选择器、伪类选择器的权重为10

（此图以选中属性为class且值以nn开头的列表项，设置其背景色）

结构伪类选择器：

选择符	说明
E：first-child	匹配父元素中第一个子元素E
E ：last	匹配父元素中最后一个子元素E
E :nth-child(n)	匹配父元素中的第n个子元素E
E :first-of-type	指定类型E的第一个
E :last-of-type	指定类型E的最后一个
E：first-child	指定类型E的最后一个

n可以是数字、关键字（even偶数、odd奇数）、公式

（以 E：first-child E：first-child 为例 ）

伪元素选择器：

选择符	说明
::befor	在元素内部前面插入内容
::after	在元素内部后面插入内容

伪元素和标签选择器一样，权重为1
（1）befor、after必须有content属性
（2）这两个选择符，会创建一个行内元素
可用display：block；转化为块级元素

（示例：）