css中li设置选中 css选择器nth

CSS中的nth选择器是一种用于选择元素的特殊类型的选择器。它允许我们根据元素在其父元素中的位置来选择特定的元素。nth选择器的语法是`:nth-child(an+b)`，其中a和b是整数，表示一个模式。这个模式用于确定要选择的元素的位置。

让我们来看一个简单的示例，假设我们有一个无序列表（ul），其中包含5个列表项（li）。我们想要选择第2个和第4个列表项，并对它们应用特定的样式。我们可以使用nth选择器来实现这个效果。

li:nth-child(2n) {
  background-color: yellow;
}

在这个示例中，我们使用了`:nth-child(2n)`选择器来选择每隔两个元素的列表项。这意味着我们选择了第2个、第4个、第6个等等所有偶数位置的列表项。然后，我们将它们的背景颜色设置为黄色。

除了使用`n`来选择每隔几个元素之外，我们还可以使用`:nth-child(an+b)`选择器来选择特定的元素。例如，如果我们想选择第3个和第6个列表项，我们可以使用`:nth-child(3n)`选择器。

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

在这个示例中，我们选择了每隔三个元素的列表项，并将它们的文字颜色设置为红色。

除了`:nth-child`选择器，CSS还提供了`:nth-last-child`选择器和`:nth-of-type`选择器来选择元素。`:nth-last-child`选择器与`:nth-child`选择器类似，但是它从元素的末尾开始计数。`:nth-of-type`选择器只选择特定类型的元素，而不考虑它们的位置。

总结一下，nth选择器是一种非常有用的选择器，可以根据元素在其父元素中的位置来选择特定的元素。我们可以使用`an+b`的模式来选择元素，并对它们应用不同的样式。这个选择器在设计网页布局时非常有用，可以帮助我们选择特定位置的元素，并为它们应用特定的样式。