這是在對一個(gè)博客模板進(jìn)行移動(dòng)端適配時(shí)遇到的一個(gè)場景。html結(jié)構(gòu)如下：
要解決的問題是如何在不修改任何html代碼的情況下，僅僅通過css實(shí)現(xiàn)下面的效果：
1）改變它們的顯示順序，.MainCell顯示在前，.LeftCell顯示在后（與html結(jié)構(gòu)中的順序相反）。
2）讓它們分行顯示。 .MainCell與.LeftCell是表格的單元格，它們默認(rèn)是以列的方式排列在一行顯示，如果解決了第1個(gè)問題，那就是.MainCell在左，.LeftCell在右；讓它們分行方式顯示就是.MainCell顯示在上面，.LeftCell顯示在下面。
要解決這2個(gè)問題，首先要解決1個(gè)選擇器的問題 —— 如何在沒有id與class的情況下，讓添加的樣式只針對表格（table）的第2行（tr）生效。
css3中有個(gè)偽類選擇器可解決這個(gè)問題，它就是 :nth-child() （參考資料：CSS3 :nth-child()偽類選擇器），于是就有了下面的選擇器：
.Framework tr:nth-child(2){
}
接下來解決上面的第1個(gè)問題 —— 改變元素的顯示順序。
css3中引人了一個(gè)新的布局模型 —— flex （彈性盒模型，flexible box的縮寫，參考資料：深入理解CSS彈性盒模型flex）。使用flex布局，可以通過order控制顯示順序（order值小的顯示在前面）。
