css - nth-last-child 选择器不准确

Question

无法理解。

使用以下 CSS:

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

和以下 html(好吧，haml):

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

.clearfix div 被计算在选择器中，因此我无法获得好的 .field 的 div 以进行特定样式设置。

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

Answer 1

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

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

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

有了这个理解，您可以将选择器更改为 .bloc :nth-last-child(3)。

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