第n个孩子不上课 [英] nth-child doesn't respond to class

问题描述

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

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

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

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

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

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

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

div.red:nth-child(6)

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

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

div.red:nth-child(9)

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

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.

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

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:

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

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

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.

推荐答案

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

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:

<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;
}

<小时>

关于你问题的最后一点:

---

Regarding the last bit of your question:

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

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.

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

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

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

: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-of-type() 在给定类型的兄弟级别上操作，而不考虑其他简单的选择器.然后，如果出现该类型的第 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.

这篇关于第n个孩子不上课的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！