常見問題：
在容器中使用float布局一個(gè)列數(shù)固定行數(shù)不定的格子（大小都一樣）展示區(qū)域（即格子的個(gè)數(shù)不定），我們?cè)撊绾胃鼉?yōu)雅的處理邊距？
因?yàn)橹挥腥萜髦凶钣乙涣泻妥钕乱恍械母褡臃謩e需要單獨(dú)處理一下右邊距和下邊距，我們很自然的想到使用css選擇器，咦，好像最后一行不太好選，那就改為處理第一行吧，使其它元素使用margin-top來增加邊距就好了。 it's a piece of cake!
html如下：
<div class="coontainer clearfix">
<!-- n個(gè)如下的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時(shí)有辦法么？（才不會(huì)說我就是腦子一時(shí)秀逗，非要認(rèn)為是最后一行與眾不同的。。。）問題來了：展示的行數(shù)不固定，最后一行元素是否占滿也不確定，那還能否完美選擇最后一行元素？
nth-child()使用進(jìn)階
雖然最開始我確實(shí)走了很大的彎路，但也正因?yàn)樯厦嫣岬降睦_，我開始了去尋找選擇最后一行元素的方法，然后也就發(fā)現(xiàn)了讓我?以前沒見過的級(jí)聯(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選擇器還可以級(jí)聯(lián)使用！當(dāng)然我們都知道css選擇器是從右向左匹配的，那么上面這個(gè)是什么意思呢？nth-last-child(-n+3)選擇的是容器中的最后3個(gè)元素，nth-child(3n+1)選擇第（3n+1）個(gè)元素，也就是第一列的元素（因?yàn)槊啃姓故?個(gè)元素，多以兩種選擇都合3有關(guān)），兩者的交集恰好就是最后一行的第一個(gè)元素，也就是左下角的這個(gè)元素。但是最后一行的元素個(gè)數(shù)也并不確定，為了完整的匹配到其后的元素，我們使用通用兄弟選擇器~來選中該目標(biāo)后面的兄弟元素，這樣兩者結(jié)合便可以保證總是找全最后一行的元素，而不用管該行是否占滿。
回過頭來看，其實(shí)選擇最后一行元素的應(yīng)用場(chǎng)景并不多，謹(jǐn)此記錄一下，萬一哪天用得到。它的思想?yún)s是我以前未曾想到過的，使用兩層過濾器先找到最后一行第一列的元素，然后使用兄弟選擇器匹配到該行其它的元素，分步來看這些東西又都是我們所熟悉的。然后就是許久沒寫代碼，思維又有些僵化了，因?yàn)槭莾蓛芍g有距離，那么最后一行不好選，就選擇第一行啊，這種思維的靈活性在對(duì)代碼的生疏中也是日益減弱，值得警惕。
