css3的选择器

1.1 选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

1.1.1 属性选择器

参考手册

1、E[attr] 表示存在attr属性即可；

2、E[attr=val] 表示属性值完全等于val

3、E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的

4、E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以“-”分隔的

5、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置

6、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置

7、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置

1.1.2 伪类选择器

参考手册

重点理解E是用来参考确定其父元素的，nth-child(n) 对应根据E元素确定的父元素的所有子元素，nth-of-type(n) 的不同之处在于其对应的是只有E元素，会忽略其子元素。（此处要配合案例加强理解）

E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素

E:nth-of-type(n) 第n个子元素，计算方法只是E元素，会忽略其子元素的

存在

E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。

E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。

n遵循线性变化，其取值1、2、3、4、...

关于n的取值范围：

1、当n做为一个独立值时，n取值为n>=1，例如nth-child(n)

2、当n做一个系数时，n取值为n>=0者n<0，例如nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1；

E:only-child 表示当前以E确定的父元素，除E之外并无其它子元素（独生子）；

E:only-of-type表示当前以E确定的父元素， 除E之外不能包含其它和E同类型的子元素；

E:target 结合锚点进行使用，处于当前锚点的元素会被选中；

E:empty 选中没有任何子节点的E元素；

1.1.3 伪元素选择器

E::selection 可改变选中文本的样式

E::placeholder 可改变placeholder默认样式，这个存在明显的兼容问题，比如::-webkit-input-placeholder，具体参考手册进行对比。

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待。

":" 与 "::" 区别在于区分伪类和伪元素