分類導航

神奇的css！竟然可以這樣玩轉表格

這是在對一個博客模板進行移動端適配時遇到的一個場景。html結構如下：

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

1）改變它們的顯示順序，.MainCell顯示在前，.LeftCell顯示在后（與html結構中的順序相反）。

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

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

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

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

接下來解決上面的第1個問題 —— 改變元素的顯示順序。

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