nth-child不响应类

Question

如何让nth-child伪类选择器与指定的类一起使用？

请看这个例子：http://jsfiddle.net/fZGvH/

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

而且，当你指定这个时，它会将第五个DIV变成红色：

div.red:nth-child(6)

当你指定这个属性时，它会将第8个 DIV 元素变为红色：

div.red:nth-child(9)

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

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

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

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

- Arne Stephensson

---

div.red:nth-child(9) 不会使任何东西变成红色。我在你的 fiddle 上尝试了一下（请注意，您可以将 CSS 放置在 CSS 面板中，而不是在 <style> 标签中）。 - BoltClock

这很奇怪。你在fiddle之外试过吗？似乎body标签没有作为父级元素的效果。我在所有<div>标签周围添加了一个<span>作为容器，然后nth-child选择器按预期工作。 - ckaufman

@ckaufman，是的，我确实在本地尝试过，这就是为什么（正如@BoltClock指出的那样）一切都在一个窗格中。我一直在复制+粘贴，试图找到问题所在。但它的工作方式是相同的。HTML是有效的，但有些奇怪，并且在我编写的应用程序中也是同样的方式工作。即使使用正确的标题[http://jsfiddle.net/runnC/]，代码的工作方式也是相同的-`(9)`实际上是`(8)`，`(3)`实际上是`(2)`等等。 - Arne Stephensson

@BoltClock，请再试一次，当我尝试使用div.red:nth-child(9)时，第8个div会变成红色。div:nth-child(2)会将第一个div变成橙色。我无法弄清楚，但正如我所说，它在应用程序中的工作方式相同，有点奇怪。 - Arne Stephensson

将此标记为重复问题，该问题最初发布大约一周后，但主要是因为该问题更为普遍，因此包含比此问题更规范的答案。 - BoltClock

Answer 1

在CSS中没有办法按类进行过滤，因为没有:nth-of-class()选择器。解决这个问题的一种方法是将您两种不同类型的

放入自己的组中，然后基于这些组进行选择。例如：

<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个元素不在被简单选择器匹配的元素之内，则没有匹配项。

- BoltClock

---

我认为这确实是我在寻找的内容——:nth-of-class 不存在。看起来 .red:nth-child(2) 应该是自然的 CSS 语法，但它并没有按预期工作。太糟了，因为它本来会非常有用。 - Arne Stephensson

我尝试了这种方法，但似乎仍然无法使其工作，请看一下 http://jsfiddle.net/BUWaZ/ - Gezzamondo

@Gezzamondo 请看 http://jsfiddle.net/BUWaZ/19/，您尝试搜索第一个li的第三个子元素。 - Rafael

.classname:nth-child(1n){...} 在页面上作用于第一个 .classname。 - Ben Racicot

Answer 2

你可以使用通用兄弟选择器：

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

它很冗长，需要将样式重置回来，但在某些特殊情况下可能会有用。

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

- Jacob Rask

Answer 3

我发现一种更简单的解决方案，可以在不需要任何特殊代码的情况下处理我的div。

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

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

- chris_r

---

这个不起作用。https://jsfiddle.net/Lf6a7fxh/1/ 第一个 div.colorme 应该是蓝色的，但实际上不是，因为第一个没有类名的 div 被计算在内了。 - Kafoso

@Kafoso 是正确的。 - Thomas