- Objective:
- Breadcrumb:
# 概念阐释
## 语义
通过CSS伪类来控制当前所有**兄弟元素**，要比单独定义class或id更方便。
## 语法
`:nth-child(an+b)`,括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）
- `0n+3` 或简单的 `3` 匹配第三个元素。（从n=0开始，0+3=3）
- `1n+0` **或简单的 `n`** 匹配每个元素。（从n=0开始，0x0=0不存在，n=1，2，3...）
- `2n+0` **或简单的 `2n`** 匹配位置为 2、4、6、8...的元素，或者`tr:nth-child(even)`（从n=0开始，2x0=0不存在，2，4，6，8...）
- `2n+1` 匹配位置为 1、3、5、7...的元素，或者`tr:nth-child(odd)`（2+1，4+1，6+1...)
# 实例
### 实例1
- 转换表格的单行或双行样式
### 实例2
```html
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
```
```css
/*block盒子样式*/
.block {
border: 20px solid #7C4723;
border-radius: 5px;
box-shadow:
0 0 0 2px hsl(0, 0%, 80%);
color: white;
font-size: 30px;
font-weight: bold;
line-height: 50px;
margin-top: 4px;
margin-bottom: 4px;
padding: 15%;
position: relative;
text-align: center;
width: 90px;
}
/*如果有10个盒子，每个盒子的单独样式,1n匹配后续的1，5，7，不写n只会匹配第一个盒子*/
.block:nth-child(1n){
background-color: #fa4359;
margin-left: 70px;
}
/*如果有10个盒子，每个盒子的单独样式,2n匹配2，4，8，10*/
.block:nth-child(2n){
background-color: #4b35ef;
margin-left: 25px;
}
/*如果有10个盒子，每个盒子的单独样式,3n匹配3，6，9*/
.block:nth-child(3n){
background-color: #37c3be;
margin-left: -15px;
}
```
# 相关内容
# 参考资料
- [CSS 伪类](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes)
- [:nth-child MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child)
- [[js 库 Handlebars "Each" and "This"]]练习题