使用 nth-child 减少最后 4 个容器

Question

我的主页上列出了许多产品，我使用 nth-child 元素来定位最后 4 个以将底部边距减少到 0，但似乎不起作用，我以为它是 nth- child(5), nth-child(6) 等

直播网址（http://bit.ly/1gwfpNF）

这是一个sn-p

#layout #categories .box-1:nth-child(5) { margin-bottom: 0px; }
#layout #categories .box-1:nth-child(6) { margin-bottom: 0px; }
#layout #categories .box-1:nth-child(7) { margin-bottom: 0px; }
#layout #categories .box-1:nth-child(8) { margin-bottom: 0px; }

Answer 1

就像我昨天学到的，你可以这样做：

#layout #categories a:nth-last-of-type(-n+4) .box-1 {
    margin-bottom: 0;
}

nth-child 在父项中计数，因此当您查找 .box 中的 nth-child 时，您的情况总是只有一个子项。

Answer 2

使用 !important 关键字覆盖如下：

margin-bottom: 10px !important;

#layout #categories .box-1 {
width: 248px;
float: left;
margin-bottom: 10px !important;
margin-top: -140px;
margin-bottom: 150px;
}