常见问题：
在容器中使用float布局一个列数固定行数不定的格子（大小都一样）展示区域（即格子的个数不定），我们该如何更优雅的处理边距？
只有方块的两两之间才有边距
因为只有容器中最右一列和最下一行的格子分别需要单独处理一下右边距和下边距，我们很自然的想到使用css选择器，咦，好像最后一行不太好选，那就改为处理第一行吧，使其它元素使用margin-top来增加边距就好了。 it's a piece of cake!
html如下：
<div class="coontainer clearfix">
<!-- n个如下的div -->
<div class="item">item</div>
</div>
css如下：
.clearfix:after{
content: "";
display: table;
clear: both;
}
.container{
width: 340px;
margin: 20px auto;
background-color: silver;
}
.item{
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin:20px 20px 0 0;
background-color: pink;
}
/* 使用选择器重置最后一列格子右边距为0 */
.item:nth-child(3n){
margin-right: 0;
}
/* 重置第一行格子的上边距为0 */
.item:nth-child(-n+3){
margin-top: 0;
}
以上内容我们基本都不用任何思考就能写出来。
但是假如最开始没有转过弯，就是想要重置最后一行的格子的margin-bottom为0时有办法么？（才不会说我就是脑子一时秀逗，非要认为是最后一行与众不同的。。。）问题来了：展示的行数不固定，最后一行元素是否占满也不确定，那还能否完美选择最后一行元素？
nth-child()使用进阶
虽然最开始我确实走了很大的弯路，但也正因为上面提到的困扰，我开始了去寻找选择最后一行元素的方法，然后也就发现了让我�以前没见过的级联使用的nth-child用法:
/* 使用选择器重置最后一行的格子下边距为0 */
.item:nth-child(3n+1):nth-last-child(-n+3),
.item:nth-child(3n+1):nth-last-child(-n+3)~.item{
margin-bottom: 0;
}
原来css选择器还可以级联使用！当然我们都知道css选择器是从右向左匹配的，那么上面这个是什么意思呢？nth-last-child(-n+3)选择的是容器中的最后3个元素，nth-child(3n+1)选择第（3n+1）个元素，也就是第一列的元素（因为每行展示3个元素，多以两种选择都合3有关），两者的交集恰好就是最后一行的第一个元素，也就是左下角的这个元素。但是最后一行的元素个数也并不确定，为了完整的匹配到其后的元素，我们使用通用兄弟选择器~来选中该目标后面的兄弟元素，这样两者结合便可以保证总是找全最后一行的元素，而不用管该行是否占满。
回过头来看，其实选择最后一行元素的应用场景并不多，谨此记录一下，万一哪天用得到。它的思想却是我以前未曾想到过的，使用两层过滤器先找到最后一行第一列的元素，然后使用兄弟选择器匹配到该行其它的元素，分步来看这些东西又都是我们所熟悉的。然后就是许久没写代码，思维又有些僵化了，因为是两两之间有距离，那么最后一行不好选，就选择第一行啊，这种思维的灵活性在对代码的生疏中也是日益减弱，值得警惕。
网友评论