CSS nth-child 对课堂没有反应

nth-child doesn't respond to class

提问by Arne Stephensson

Is it possible to get the nth-child pseudo-selector to work with a specific class?

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

See this example: http://jsfiddle.net/fZGvH/

请参阅此示例：http: //jsfiddle.net/fZGvH/

I want to have the second DIV.red turn red, but it doesn't apply the color as expected.

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

Not only that, but when you specify this, it changes the 5th DIV to red:

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

div.red:nth-child(6)

When you specify this, it changes the 8th DIV to red:

当您指定此项时，它会将第 8 个 DIV 更改为红色：

div.red:nth-child(9)

It seems to be one DIV behind. There are only 8 DIV tags in the example so I don't know why nth-child(9) even works. Testing using Firefox 3.6, but in my actual production code the same problem occurs in Chrome. I'm not understanding something about how this is supposed to work, would appreciate clarification.

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

Also, this will change the 6th DIV to red, but what I actually want is for it to change the second DIV.red to red:

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

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

And I don't understand why nth-child() and nth-of-type() respond differently, since there are only eight tags of the same type in the document.

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

采纳答案by BoltClock

There's no way to filter by class in CSS because there's no :nth-of-class()selector. One way around this is to put your two different kinds of divs into their own groups, then select based on those groups. For example:

因为没有:nth-of-class()选择器，所以没有办法在 CSS 中按类过滤。解决此问题的一种方法是将您的两种不同类型的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>

With this selector:

使用此选择器：

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

---

---

Regarding the last bit of your question:

关于你问题的最后一点：

And I don't understand why nth-child() and nth-of-type() respond differently, since there are only eight tags of the same type in the document.

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

For the code you give there shouldn'tbe any difference. I tested it, and the two pseudo-classes work as expected. But, in general:

对于您提供的代码，应该没有任何区别。我测试了它，两个伪类按预期工作。但是，一般来说：

:nth-child()operates on an entire level of siblings without regard for any other simple selectors. Then if the nth child is not among what's matched by the simple selectors, nothing is matched.

:nth-child()在不考虑任何其他简单选择器的情况下对整个兄弟级进行操作。然后，如果第 n 个孩子不在简单选择器匹配的范围内，则不会匹配任何内容。

:nth-of-type()operates on a level of siblings of the given type without regard for other simple selectors. Then if the nth element occurring of that type is not among what's matched by the simple selectors, nothing is matched.

:nth-of-type()在不考虑其他简单选择器的情况下对给定类型的兄弟级进行操作。然后，如果该类型出现的第 n 个元素不在简单选择器匹配的元素中，则没有匹配。

回答by Jacob Rask

You can use the general sibling combinator:

您可以使用一般的兄弟组合器：

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

It is verbose and you need to reset the styles back again, but it could be useful in some special situations.

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

It could be automated with a CSS preprocessor, and if I understand gzip correctly, since the CSS ouput is just repeating the same text the gziped file size should not be terribly big unless you use it a lot.

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

回答by chris_r

there's a simpler solution that I have found to work with my divs without any special lines of code.

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

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

works just fine as well without the div in front.

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