CSS nth-child 对类选择器不起作用

在本文中，我们将介绍CSS中的nth-child选择符为何不对类选择器起作用，并提供一些示例进行说明。

阅读更多：CSS 教程

什么是nth-child选择符？

在CSS中，nth-child选择符用于选取指定元素的兄弟元素中的第n个元素。该选择符可以与各种选择器一起使用，例如标签选择器、id选择器和类选择器。

在CSS中，类选择器是使用class属性来选择元素的常见方法。然而，对于nth-child选择符来说，它似乎无法像普通的标签选择器或id选择器一样对类选择器起作用。这意味着当我们尝试使用nth-child选择符与类选择器结合时，选择符不会按照预期的方式选择元素。

让我们看一个示例来说明这个问题。假设我们有以下HTML结构：

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

现在，我们希望使用nth-child选择符选择第2个li元素并设置其背景颜色为红色。我们可能会尝试使用以下CSS代码：

.item:nth-child(2) {
  background-color: red;
}

然而，我们会发现第2个li元素的背景颜色并没有变为红色。这是因为nth-child选择符不会按照类选择器所选的元素来计算，而是仅仅按照元素在其父元素中的位置进行计算。

要解决nth-child选择符对类选择器不起作用的问题，我们可以使用nth-of-type选择符，它与nth-child选择符类似，但它只选择相同类型的元素。这意味着我们可以通过结合使用类选择器和标签选择器来实现我们的目标。

以下是一个使用nth-of-type选择符解决问题的示例：

li.item:nth-of-type(2) {
  background-color: red;
}

现在，第2个具有类名为“item”的li元素的背景颜色将变为红色。

通过本文，我们了解了为何CSS的nth-child选择符对于类选择器不起作用，并提供了一个解决方案。

尽管nth-child选择符不能直接与类选择器一起使用，但我们可以使用nth-of-type选择符结合类选择器和标签选择器来实现类似的效果。

希望本文对你理解CSS中的选择器有所帮助！