CSS 中的nth-of-type VS nth-child

在本文中，我们将介绍CSS中的nth-of-type和nth-child属性的区别和用法。这两个属性都用于选择特定位置的子元素，但使用方式和选择的准则不同。

阅读更多：CSS 教程

nth-of-type属性

nth-of-type属性用于选择同一类型的兄弟元素中的第n个元素。它的语法是：nth-of-type(n)。这个属性可以选择所有指定类型的兄弟元素中的第n个元素，而不管它们的父元素是否相同。下面是一个例子：

p:nth-of-type(2) {
  color: red;
}

在上面的例子中，选择器选择父元素中的第二个p元素，并将其字体颜色设置为红色。

除此之外，nth-of-type还支持使用关键字odd和even来选择奇数和偶数位置的元素。例如：

p:nth-of-type(odd) {
  background-color: #f1f1f1;
}

以上代码将选择所有奇数位置的p元素，并将其背景颜色设置为淡灰色。

nth-child属性

nth-child属性用于选择某个元素的所有子元素中的第n个元素。它的语法是：nth-child(n)。这个属性选择的是所有子元素中的第n个元素，而不管其类型是否相同。下面是一个例子：

div:nth-child(3) {
  border: 1px solid black;
}

在上面的例子中，选择器选择父元素中第三个子元素，并给它添加一个黑色的边框。

与nth-of-type不同，nth-child不支持关键字odd和even来选择奇数和偶数位置的元素。它只能选择指定位置的元素。例如，下面的代码将选择第一个、第五个和第九个子元素：

ul li:nth-child(1), ul li:nth-child(5), ul li:nth-child(9) {
  font-weight: bold;
}

以上代码将选择ul元素中的第一个、第五个和第九个li元素，并将它们的字体加粗。

特殊情况和注意事项

在使用nth-of-type和nth-child属性时，需要注意以下几点：

这两个属性中的参数n是从1开始计数的。
nth-of-type和nth-child都只能选择子元素，不能选择父元素本身。
如果没有符合条件的元素，选择器将不会起作用。

示例

下面的示例展示了如何使用nth-of-type和nth-child属性来选择特定位置的元素。

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Watermelon</li>
</ul>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>

ul li:nth-of-type(2n) {
  color: blue;
}

ul li:nth-child(3) {
  font-size: 20px;
}

p:nth-of-type(odd) {
  background-color: #f1f1f1;
}

p:nth-child(2) {
  text-align: center;
}

上述的CSS代码会根据选择器对元素进行样式设置。具体效果如下：

第2个、第4个和第5个li元素的字体颜色将被设置为蓝色。
第3个li元素的字体大小将被设置为20像素。
所有奇数位置的p元素的背景颜色将被设置为淡灰色。
第2个p元素的文字将居中对齐。

总结

本文介绍了CSS中nth-of-type和nth-child属性的区别和用法。nth-of-type选择同一类型的兄弟元素中特定位置的元素，而nth-child选择一个元素的所有子元素中特定位置的元素。使用时需要注意它们的不同特性和参数的计数方式。通过灵活使用这两个属性，我们可以更加自由地控制和样式化网页中的元素。