分類(lèi)導(dǎo)航

神奇的css！竟然可以這樣玩轉(zhuǎn)表格

這是在對(duì)一個(gè)博客模板進(jìn)行移動(dòng)端適配時(shí)遇到的一個(gè)場(chǎng)景。html結(jié)構(gòu)如下：

要解決的問(wèn)題是如何在不修改任何html代碼的情況下，僅僅通過(guò)css實(shí)現(xiàn)下面的效果：

1）改變它們的顯示順序，.MainCell顯示在前，.LeftCell顯示在后（與html結(jié)構(gòu)中的順序相反）。

2）讓它們分行顯示。 .MainCell與.LeftCell是表格的單元格，它們默認(rèn)是以列的方式排列在一行顯示，如果解決了第1個(gè)問(wèn)題，那就是.MainCell在左，.LeftCell在右；讓它們分行方式顯示就是.MainCell顯示在上面，.LeftCell顯示在下面。

要解決這2個(gè)問(wèn)題，首先要解決1個(gè)選擇器的問(wèn)題 —— 如何在沒(méi)有id與class的情況下，讓添加的樣式只針對(duì)表格（table）的第2行（tr）生效。

css3中有個(gè)偽類(lèi)選擇器可解決這個(gè)問(wèn)題，它就是 :nth-child() （參考資料：CSS3 :nth-child()偽類(lèi)選擇器），于是就有了下面的選擇器：

.Framework tr:nth-child(2){
}

接下來(lái)解決上面的第1個(gè)問(wèn)題 —— 改變?cè)氐娘@示順序。

css3中引人了一個(gè)新的布局模型 —— flex （彈性盒模型，flexible box的縮寫(xiě)，參考資料：深入理解CSS彈性盒模型flex）。使用flex布局，可以通過(guò)order控制顯示順序（order值小的顯示在前面）。