CSS3选择器

1.  :first-child选择器单独指定第一个子元素设定样式

2.  :last-child选择器单独指定最后一个子元素设定样式

3.  :nth-child与:nth-last-child能够对指定序号的子元素或者第奇数个、第偶数个子元素设定样式

<1>:nth-child(n)表示第n个子元素

<2>:nth-last-child(n)表示倒数第n个子元素

<3>:nth-child(odd)表示所有奇数个子元素

<4>:nth-child(even)表示所有偶数个子元素

<5>:nth-last-child(odd)表示所有倒数上去的第奇数个子元素

<6>:nth-last-child(even)表示所有倒数上去的第偶数个子元素

/*这两种选择器选择列表元素时没有问题，但选择其他元素会产生一些问题。如h2:nth-child(odd)并不会选择针对div元素中第奇数个h2子元素，而是当div中的第奇数个元素是h2元素时使用。因为div中不仅有h2元素，所以达不到理想效果。*/

4. :nth-of-type与:nth-last-of-type在计算子元素位置时就会只针对同类型子元素进行计算，其他方法与上相同。

5. 此类选择器参数可以是可循环的αn+β，可以为列表项目等循环使用样式。而odd与even也可以用2n+1与2n+2等参数代替。

6. :only-child选择器可以指定某个父元素中只有一个子元素时使用样式，效果等价于 :nth-child(1):nth-last-child(1)

7. :only-of-type可以让样式只对唯一子元素起作用。

8. :hover选择器用于指定鼠标移动到元素上时候的样式。

9. :active选择器用于鼠标在元素上按下还没有松开时候的样式。

10. :focus用于指定元素获得焦点时的样式。

11. :enabled用于指定元素可用时的样式。

12 :disabled用于指定元素处于不可用状态时的样式

13. :read-only指定元素处于只读状态时的样式//firefox中加-moz-

14. :read-write指定元素处于非只读状态时的样式

15. :checked指定表单中单选或者复选框处于选取状态的样式。//firefox中加-moz 

16.  :default选择器指定页面打开时默认处于选取状态的单选或者复选框的样式。

17. ::selection用于指定元素处于选中状态时的样式。 p::selection →当p处于选中状态。

18. 兄弟元素选择器用于指定位于同一父元素中的某个元素之后的所有其他某种兄弟元素的样式。<子元素>~<子元素之后的兄弟元素>