Question

无法理解。

使用以下css：

.bloc .field:nth-last-child(2){ ...some values... }

和以下的html（好吧，haml）：

.bloc
    .field
    .field
    .field
    .field
    .clearfix

.clearfix div在选择器中被计算，从中我不能得到好的.field的div是专门设计的。

这对我来说似乎是个错误，但我可能错了。同样的问题适用于nth-child。

Answer 1

这里最大的误解是如何使用:nth-child()进行过滤。

.bloc .field:nth-last-child(2)表示：
“选择 .field类中.bloc类的所有倒数第二个元素。

这并不意味着：
“选择.field”内的所有倒数第二个.bloc元素。

根据这种理解，您只需将选择器更改为.bloc :nth-last-child(3)。

然而，bažmegakapa的第二段回答很有意义。您应该删除.clearfix元素并使用不同的float包含技术。 "micro clearfix"是个不错的选择。另一种方法是将overflow: hidden添加到.bloc。

Answer 2

只需删除clearfix div。 :nth-last-child()和:nth-last-of-type()选择器无法按预期方式工作。他们不会对类名进行区分（第一个不区分，只从倒数计算，第二个只对元素类型进行区分）。

有数千个clearing techniques，其中只有一部分需要添加标记。只需overflow: hidden或overflow: auto在容器上。如果您可以使用:nth-last-child，您还可以使用::after使用的清算技术。

Answer 3

如果是:nth-last-child(2)，则选择该类的元素。

如果您使用.field和.clearfix元素的其他类型使用:nth-last-of-type()，则可以达到您真正想要的效果。

Answer 4

尝试这个，似乎是先找到一个.clear给我：

.bloc .field:nth-last-child(2) { color: #CC0000; }

http://jsfiddle.net/clowerweb/Dp3yW/

nth-last-child选择器不准确

4 个答案: