nth-child 不响应类 [重复]答案

【问题标题】：nth-child doesn't respond to class [duplicate]nth-child 不响应类 [重复]
【发布时间】：2011-07-22 16:04:15
【问题描述】：

是否可以让 nth-child 伪选择器与特定类一起使用？

我想让第二个 DIV.red 变成红色，但它没有按预期应用颜色。

不仅如此，当你指定它时，它会将第 5 个 DIV 更改为红色：

div.red:nth-child(6)

当你指定这个时，它会将第 8 个 DIV 更改为红色：

div.red:nth-child(9)

它似乎落后了一个 DIV。示例中只有 8 个 DIV 标签，所以我不知道为什么 nth-child(9) 甚至可以工作。使用 Firefox 3.6 进行测试，但在我的实际生产代码中，Chrome 中也会出现同样的问题。我不了解这应该如何工作，希望得到澄清。

此外，这会将第 6 个 DIV 更改为红色，但我真正想要的是将第二个 DIV.red 更改为红色：

div.red:nth-of-type(6)

而且我不明白为什么 nth-child() 和 nth-of-type() 响应不同，因为文档中只有八个相同类型的标签。

【问题讨论】：

div.red:nth-child(9) 不会导致任何东西变红。我在你的小提琴上试过（请注意，你可以将 CSS 放在 CSS 面板中，而不是放在 <style> 标签中）。
这很奇怪。您是否在小提琴之外尝试过？似乎身体标签没有充当父母的东西发生了一些事情。我在所有
标签周围添加了一个作为容器，并且 nth-child 选择器按预期运行。
@ckaufman，是的，我确实在本地尝试过，这就是为什么（正如@BoltClock 指出的那样）一切都在一个窗格中。我来回复制+粘贴，试图找出问题所在。但它的工作原理是一样的。 HTML 是有效的，但有些奇怪，它在我正在编码的应用程序中以相同的方式工作。即使有正确的标题 [jsfiddle.net/runnC/]，代码的工作方式也是一样的——(9) 实际上是 (8)，(3) 实际上是 (2)，等等。
@BoltClock，请再试一次，当我尝试div.red:nth-child(9) 时，第 8 个 div 变为红色。 div:nth-child(2) 将第一个 div 变为橙色。无法弄清楚，但正如我所说，它在应用程序中的工作方式相同，有点奇怪。
将其标记为最初在一周后发布的问题的欺骗，但主要是因为该问题更笼统，因此包含比此问题更规范的答案。

标签： css css-selectors

【解决方案1】：

没有办法在 CSS 中按类过滤，因为没有 :nth-of-class() 选择器。解决此问题的一种方法是将您的两种不同类型的divs 放入它们自己的组中，然后根据这些组进行选择。例如：

<div class="orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

使用这个选择器：

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

关于你问题的最后一点：

而且我不明白为什么 nth-child() 和 nth-of-type() 响应不同，因为文档中只有八个相同类型的标签。

对于您提供的代码不应该有任何区别。我对其进行了测试，这两个伪类按预期工作。但是，总的来说：

:nth-child() 在整个级别的兄弟姐妹上运行，而不考虑任何其他简单的选择器。然后，如果第 n 个孩子不在简单选择器匹配的对象中，则不匹配。

:nth-of-type() 在给定类型的同级级别上操作，而不考虑其他简单的选择器。然后，如果出现该类型的第 n 个元素不在简单选择器匹配的内容中，则不匹配任何内容。

【讨论】：

我认为这确实是我想要的——:nth-of-class 不存在。 .red:nth-child(2) 似乎是自然的 CSS 语法，但它不能按预期工作。太糟糕了，因为它真的很有用。
我试过这个方法，但我似乎仍然无法让它工作，看看jsfiddle.net/BUWaZ
@Gezzamondo 看jsfiddle.net/BUWaZ/19你试图搜索第一个li的第三个孩子。
.classname:nth-child(1n){... 作用于页面上的第一个 .classname

【解决方案2】：

您可以使用通用兄弟组合器：

div,
div.red ~ div.red ~ div.red {
  background: gray;
}
div.red ~ div.red {
  background: red;
}

它很冗长，您需要再次重置样式，但它在某些特殊情况下可能很有用。

它可以通过 CSS 预处理器自动执行，如果我理解 gzip 正确，由于 CSS 输出只是重复相同的文本，gzip 文件大小应该不会太大，除非你经常使用它。

【讨论】：

【解决方案3】：

我发现有一个更简单的解决方案可以在没有任何特殊代码行的情况下使用我的 div。

.red div:nth-child(6) {background-color:#ccc;}
.red div:nth-child(9) {background-color:#eee;}

如果没有前面的 div，也可以正常工作。

【讨论】：

这不起作用。 jsfiddle.net/Lf6a7fxh/1 第一个 div.colorme 应该是蓝色的，但事实并非如此，因为考虑了第一个没有类名的 div。
@Kafoso 是对的