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 个孩子。

score 4 · Accepted Answer

这里最大的误解是过滤使用的:nth-child()工作原理。

.bloc .field:nth-last-child(2)意思是：
“选择所有倒数第二个元素，其.field类在一个.bloc”内。

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

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

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

score 3 · Accepted Answer

只需删除 clearfix div。:nth-last-child()和:nth-last-of-type()选择器不会按您期望的方式工作。他们不会区分类名（第一个不区分，只从倒数开始，第二个只区分元素类型）。

有数以千计的清算技术，其中只有一些需要添加标记。简单地overflow: hidden或overflow: auto在容器上。如果您可以使用:nth-last-child，您也可以使用采用::after.

score 2 · Accepted Answer

您正在选择具有该类的元素，如果它是:nth-last-child(2).

.field如果你对and.clearfix元素使用不同的类型，你可以实现你真正想要的，使用:nth-last-of-type().

score -1 · Accepted Answer

试试这个，对我来说似乎是 .clear 之前的那个：

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

4 回答 4