n-child对class级没有反应
是否有可能得到第n孩子伪select器与特定的类工作？
看到这个例子： http : //jsfiddle.net/fZGvH/
我想让第二个DIV.red变成红色，但是它并不像预期的那样应用颜色。
不仅如此，而且当你指定这个时，它将第5个DIV改为红色：
div.red:nth-child(6) 当你指定这个时，它将第8个DIV改为红色：
div.red:nth-child(9)
这似乎是一个DIV背后。 这个例子中只有8个DIV标签，所以我不知道为什么n-child（9）甚至可以工作。 使用Firefox 3.6进行testing，但是在我的实际生产代码中，Chrome出现同样的问题。 我不理解这个应该如何工作的东西，将不胜感激澄清。
此外，这将改变第六个DIV为红色，但我真正想要的是它将第二个DIV.red更改为红色：
div.red:nth-of-type(6)
我不明白为什么nth-child（）和nth-of-type（）以不同的方式响应，因为文档中只有8个相同types的标签。
在CSS中没有办法按类进行过滤，因为没有:nth-of-class()select器。 解决这个问题的一个办法就是把你的两种不同的div分成他们自己的组，然后根据这些组进行select。 例如：
<div class="orange"> <div></div> <div></div> <div></div> <div></div> </div> <div class="red"> <div></div> <div></div> <div></div> <div></div> </div>
有了这个select器：
div.red div:nth-child(2) { background: red; }
关于你的问题的最后一点：
我不明白为什么nth-child（）和nth-of-type（）以不同的方式响应，因为文档中只有8个相同types的标签。
对于你给的代码应该没有任何区别。 我testing了它，两个伪类按预期工作。 但是，一般来说：
:nth-child()在不考虑任何其他简单select器的情况下在整个兄弟级别上运行。 那么如果第n个孩子不在简单的select器的匹配之中，则没有任何匹配。
:nth-of-type()在给定types的兄弟级别上运行，而不考虑其他简单的select器。 那么如果该types的第n个元素不在简单select器的匹配之中，则没有任何匹配。
你可以使用一般的兄弟组合：
div, div.red ~ div.red ~ div.red { background: gray; } div.red ~ div.red { background: red; }
这是冗长的，你需要重新设置样式，但在某些特殊情况下可能会有用。
它可以使用CSS预处理器自动化，如果我正确理解gzip，由于CSS输出只是重复相同的文本，所以gziped文件的大小不应该非常大，除非您使用它很多。
有一个简单的解决scheme，我发现与我的div工作没有任何特殊的代码行。
.red:nth-child(6) {background-color:#ccc;} .red:nth-child(9) {background-color:#eee;}
如果没有前面的div，工作也很好。
<div class="alpha"> <div class="beta"></div> <div class="beta"></div> <div class="beta"></div> <div class="beta"></div> <div class="beta"></div> </div>
…如果你想sortingdiv.beta nth孩子，你必须至less设置width =自动div.alpha，可能它的作品。
