CSS中nth-child 的实用技巧

目录：

一、基础选择
  1.选择第一个元素
  2.选择最后一个元素
  3.选择偶数元素
  4.选择奇数元素

二、数学表达式选择
  1.每隔3个选择一个
  2.选择前3个元素
  3.从第3个开始选择
  4.选择3-6之间的元素

三、实用案例
  1.表格隔行变色
  2.列表最后三个元素特殊样式
  3.首行缩进特殊处理
  4.除了第一行的元素都加上上边框

一、基础选择

1.选择第一个元素

:nth-child(1) { }

2.选择最后一个元素

:nth-last-child(1) { }

3.选择偶数元素

:nth-child(even) { }

4.选择奇数元素

:nth-child(odd) { }

二、数学表达式选择

1.每隔3个选择一个

:nth-child(3n) { }

2.选择前3个元素

:nth-child(-n+3) { }

3.从第3个开始选择

:nth-child(n+3) { }

4.选择3-6之间的元素

:nth-child(n+3):nth-child(-n+6) { }

三、实用案例

1.表格隔行变色

tr:nth-child(odd) {
  
  background-color: #f2f2f2;
}

2.列表最后三个元素特殊样式

li:nth-last-child(-n+3) {
  
  color: red;
}

3.首行缩进特殊处理

p:nth-child(1) {
  
  text-indent: 2em;
}

4.除了第一行的元素都加上上边框

.list-item:nth-child(n+2) {
  
  border-top: 1px solid #ccc;
}