css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type

https://blog.csdn.net/erdouzhang/article/details/70842177

最近系统项目，遇到较多表格 和 div 需要根据 写样式的

1.first-child（IE7兼容）、last-child（IE8不兼容）
 
html：

 

列表

 

   
• 列表项目1

   
• 列表项目2

   
• 列表项目3

   
• 列表项目4

 

css：

解析： 
一个页面中无论有几个ul列表，只要设置first-child、last-child，那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。

2.nth-child、nth-last-child （IE8不兼容）

html：

 

列表

 

   
• 列表项目1

   
• 列表项目2

   
• 列表项目3

   
• 列表项目4

   
• 列表项目5

   
• 列表项目6

 

css：

3.对奇数、偶数使用样式

html:

   
• 列表项目1

   
• 列表项目2

   
• 列表项目3

   
• 列表项目4

   
• 列表项目5

   
• 列表项目6

css：

解析： li:nth-child(odd)含义：li的父元素ul的儿子中，从1开始数，奇数儿子设置样式为xxx; 
当父元素为列表时，因为只有列表项目一种子元素，不会出现问题；当父元素是div时，就不止一种子元素，会引起问题。如下： 
例如：设置div元素中为奇数标题h2背景颜色

html:

   

文章标题A

   

我是一个小段落。。。

   

文章标题B

   

我是一个小段落。。。

   

文章标题C

   

我是一个小段落。。。

   

文章标题D

   

我是一个小段落。。。

css:

h2:nth-child(odd) {
      background-color: pink;
}

执行结果为： 

解析： h2:nth-child(odd)含义是：h2的父元素div 的所有儿子中 为奇数的儿子 设置背景颜色；而不是所有h2中为偶数的h2设置样式； 
解决方法： nth-of-type可以避免则会中问题产生

4.nth-of-type（IE8不兼容）：只针对同类型的元素进行计算

css:

h2:nth-of-type(odd) { /*所有h2标签中为奇数的设置样式*/
    background-color: pink;
}
h2:nth-of-type(even) { /*所有h2标签中为偶数的设置样式*/
    background-color: #ccc;
}

解析： h2:nth-of-type(odd)含义：在所有h2标签中，只要是奇数h2就设置样式；只针对h2标签，与父元素无关；

 

5、循环使用样式 li:nth-child(4n+1)

html：

   
• 列表项目1

   
• 列表项目2

   
• 列表项目3

   
• 列表项目4

   
• 列表项目5

   
• 列表项目6

   
• 列表项目7

   
• 列表项目8

   
• 列表项目9

   
• 列表项目10

   
• 列表项目11

   
• 列表项目12

css：

解析： 
4n含义：四个li元素为一组循环； 
4n+1含义：这一组循环中，第一个样式； 
4n+2含义：这一组循环中，第二个样式；

4n+3含义：这一组循环中，第三个样式； 
4n+4含义：这一组循环中，第四个样式；