Question

我将用户的朋友列在他/她的个人资料中作为图片（如facebook），并且对于指定的宽度，我只能列出9张图片，其中'margin-right：5px，margin-bottom：5px'。对于每个第9个元素，我需要删除margin-right，我用：

:nth-child(9n){
    margin-right: 0;
}

因此该行适合指定的宽度。问题是我还需要使它适合身高。所以，为了删除边距底部，我尝试了这个。但这不起作用：

:nth-last-of-type(-n+9){
    margin-bottom: 0;
}

因为在朋友列表中，用户可能没有列表中的9 18 27用户。如果用户有13个朋友，上面的这个css将删除最后9个，但我不希望它触及上面的行。只有最后一排。所以，有多少朋友都有用户，我必须删除最后一行的边距底部。

我希望我能清楚地解释一下。谢谢。

Answer 1

您可以使用:nth-child()和一般同级~选择器的组合来完成此操作。

http://jsfiddle.net/twu14gu0/

＆＃13;

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 90px;
    height: 90px;
    font-size: 0;
}
li {
    display: inline-block;
    height: 10px;
    width: 10px;
    font-size: 16px;
}
li:nth-child(9n) {
    color: red;
}
li:nth-child(9n+1):nth-last-child(-n+9),
li:nth-child(9n+1):nth-last-child(-n+9) ~ li {
    color: blue;
}

＆＃13;

<ul><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li></ul>

＆＃13;

Answer 2

li:last-child {
    margin-bottom:0;
}

额外知识

有办法访问任何类型的东西中的第一个和最后一个元素（例如：li，td，div ..）

要先访问，您可以使用:first-child{}。（例如：li:first-child）
要先访问，您可以使用:last-child{}。（例如：li:last-child）

Answer 3

您可以使用last-child伪类来获取最后一个元素。

:last-child {
    margin-bottom:0;
}

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

如何使用CSS定位列表中的最后一行？

3 个答案: