CSS讲座：nth-child与nth-of-type选择器的趣味之旅
欢迎来到CSS的世界！
大家好，欢迎来到今天的CSS讲座！今天我们要聊的是两个非常有趣的选择器——nth-child和nth-of-type。这两个选择器就像是CSS中的“数学天才”，它们可以帮助我们在HTML结构中精准地选择元素，甚至可以根据数学公式来选择特定的元素。听起来是不是很酷？那么，让我们一起进入这个充满乐趣的技术世界吧！
什么是nth-child和nth-of-type？
nth-child
nth-child是一个基于所有子元素的选择器。它会根据你在父元素中的位置来选择元素，而不管这些元素的类型是什么。也就是说，nth-child会忽略元素的标签名，只看它们在父元素中的顺序。
nth-of-type
nth-of-type则是一个基于同类元素的选择器。它只会选择与你指定的标签名相同的元素，并且根据它们在同类型元素中的位置来选择。换句话说，nth-of-type会忽略其他类型的元素，只关注你想要选择的那一类元素。
举个例子
假设我们有以下HTML结构：
<div class="container">
<p>段落1</p>
<p>段落2</p>
<div>嵌套的div</div>
<p>段落3</p>
<p>段落4</p>
</div>如果我们使用nth-child(3)，它会选择第3个子元素，也就是<div>。但如果我们使用nth-of-type(3)，它会选择第3个<p>元素，也就是“段落3”。
nth-child和nth-of-type的语法
这两个选择器的语法非常相似，都是通过括号中的参数来指定要选择的元素。参数可以是数字、关键词（如odd或even），甚至是数学表达式（如2n+1）。下面我们来看看具体的用法。
1. 使用数字
最简单的用法就是直接使用数字。比如：
nth-child(2)：选择第2个子元素。nth-of-type(3)：选择第3个同类型的元素。
/* 选择第2个子元素 */
.container p:nth-child(2) {
color: red;
}
/* 选择第3个<p>元素 */
.container p:nth-of-type(3) {
background-color: yellow;
}2. 使用关键词
nth-child和nth-of-type还支持一些关键词，比如odd和even，分别用于选择奇数和偶数位置的元素。
/* 选择所有奇数位置的<p>元素 */
.container p:nth-child(odd) {
font-weight: bold;
}
/* 选择所有偶数位置的<p>元素 */
.container p:nth-of-type(even) {
text-decoration: underline;
}3. 使用数学表达式
这是nth-child和nth-of-type最强大的地方！你可以使用数学表达式来选择特定的元素。常见的表达式格式为an + b，其中a和b是整数，n是从0开始的计数器。
2n + 1：选择所有奇数位置的元素。2n：选择所有偶数位置的元素。3n + 2：选择第2个、第5个、第8个……等元素。
/* 选择每3个元素中的第2个 */
.container p:nth-child(3n + 2) {
border: 2px solid blue;
}
/* 选择每4个<p>元素中的第1个 */
.container p:nth-of-type(4n + 1) {
padding: 10px;
}nth-child vs nth-of-type：实战对比
为了更好地理解这两个选择器的区别，我们可以通过一个表格来对比它们的行为。
| 序号 | 元素类型 | nth-child(2) |
nth-of-type(2) |
|---|---|---|---|
| 1 | <p> |
不匹配 | 不匹配 |
| 2 | <p> |
匹配 | 匹配 |
| 3 | <div> |
匹配 | 不匹配 |
| 4 | <p> |
不匹配 | 匹配 |
从上面的表格可以看出，nth-child会根据所有子元素的位置来选择，而nth-of-type则只关心同类型的元素。
实战案例：创建一个交替颜色的表格
现在，让我们通过一个实际的例子来应用nth-child和nth-of-type。假设我们有一个表格，想要让每一行的颜色交替显示，奇数行显示为灰色，偶数行显示为白色。
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
</table>我们可以使用nth-child来实现这个效果：
/* 选择所有奇数行 */
table tr:nth-child(odd) {
background-color: #f0f0f0;
}
/* 选择所有偶数行 */
table tr:nth-child(even) {
background-color: white;
}如果你只想选择表格中的<td>元素，而不是所有的子元素，你可以使用nth-of-type：
/* 选择所有奇数位置的<td>元素 */
table tr td:nth-of-type(odd) {
background-color: #f0f0f0;
}
/* 选择所有偶数位置的<td>元素 */
table tr td:nth-of-type(even) {
background-color: white;
}小结
今天我们学习了nth-child和nth-of-type这两个强大的CSS选择器。它们可以帮助我们在复杂的HTML结构中精准地选择元素，甚至可以根据数学公式来选择特定的元素。虽然它们看起来很相似，但它们的行为却有很大的不同：nth-child会考虑所有子元素，而nth-of-type只会考虑同类型的元素。
希望今天的讲座对你有所帮助！如果你有任何问题，欢迎在评论区留言，我们会一起探讨更多有趣的CSS技巧。下次见！
