CSS选取第几个标签元素：nth-child、first-child、last-child

1、first-child

first-child表示选择列表中的第一个标签。代码如下：

li:first-child{background:#090}

上面的意思是，li 列表中的 第一个li模块的背景颜色。

2、last-child

last-child表示选择列表中的最后一个标签，代码如下：

li:last-child{background:#090}

3、nth-child(3)

表示选择列表中的第3个标签，代码如下：

li:nth-child(3){background:#090}

上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。

4、nth-child(2n)
这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。:nth-child(2n)选取偶数标签，2n也可以是even


5、nth-child(2n-1)
这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。
:nth-child(2n-1)选取奇数标签，2n-1可以是odd

6、nth-child(n+3)
这个表示选择列表中的标签从第3个开始到最后。

7、nth-child(-n+3)
这个表示选择列表中的标签从0到3，即小于3的标签。

8、nth-last-child(3)
这个表示选择列表中的倒数第3个标签。

1.   选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。   

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

2. 用法举例

li:nth-child(3){backgroundrange;}/*把第3个LI的背景设为橙色*/
li:nth-child(3n){backgroundrange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
li:nth-child(3n+1){backgroundrange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(5n-1){backgroundrange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(-3n+8){backgroundrange;}/*匹配第8、第5和第2个LI*/
.table > tr:nth-child(even) > td {}  （偶数行）
.table > tr:nth-child(odd) > td {background-color: #ccc;}  （奇数行）

3. 扩展
“~”（波浪号     ）、  
“，”（逗号）、
“ + ”（加号）和
“ > ”（大于号）

p~ul选择器 p之后出现的所有ul。　　

两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。      

A>B 表示选择A元素的所有子B元素。　　

与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。      

.a，.b｛逗号指相同的css样式｝；

       .a .b｛空格指后代元素｝；      

.a>.b｛大于号指子代元素｝；      

.a+.b｛这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”