常見問題：
在容器中使用float布局一個列數(shù)固定行數(shù)不定的格子（大小都一樣）展示區(qū)域（即格子的個數(shù)不定），我們該如何更優(yōu)雅的處理邊距？
因為只有容器中最右一列和最下一行的格子分別需要單獨處理一下右邊距和下邊距，我們很自然的想到使用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;
}
以上內(nèi)容我們基本都不用任何思考就能寫出來。
但是假如最開始沒有轉(zhuǎn)過彎，就是想要重置最后一行的格子的margin-bottom為0時有辦法么？（才不會說我就是腦子一時秀逗，非要認(rèn)為是最后一行與眾不同的。。。）問題來了：展示的行數(shù)不固定，最后一行元素是否占滿也不確定，那還能否完美選擇最后一行元素？
nth-child()使用進(jìn)階
雖然最開始我確實走了很大的彎路，但也正因為上面提到的困擾，我開始了去尋找選擇最后一行元素的方法，然后也就發(fā)現(xiàn)了讓我?以前沒見過的級聯(lián)使用的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選擇器還可以級聯(lián)使用！當(dāng)然我們都知道css選擇器是從右向左匹配的，那么上面這個是什么意思呢？nth-last-child(-n+3)選擇的是容器中的最后3個元素，nth-child(3n+1)選擇第（3n+1）個元素，也就是第一列的元素（因為每行展示3個元素，多以兩種選擇都合3有關(guān)），兩者的交集恰好就是最后一行的第一個元素，也就是左下角的這個元素。但是最后一行的元素個數(shù)也并不確定，為了完整的匹配到其后的元素，我們使用通用兄弟選擇器~來選中該目標(biāo)后面的兄弟元素，這樣兩者結(jié)合便可以保證總是找全最后一行的元素，而不用管該行是否占滿。
回過頭來看，其實選擇最后一行元素的應(yīng)用場景并不多，謹(jǐn)此記錄一下，萬一哪天用得到。它的思想?yún)s是我以前未曾想到過的，使用兩層過濾器先找到最后一行第一列的元素，然后使用兄弟選擇器匹配到該行其它的元素，分步來看這些東西又都是我們所熟悉的。然后就是許久沒寫代碼，思維又有些僵化了，因為是兩兩之間有距離，那么最后一行不好選，就選擇第一行啊，這種思維的靈活性在對代碼的生疏中也是日益減弱，值得警惕。
