分类导航

神奇的css！竟然可以这样玩转表格

发布时间：2016年11月07日作者：文章转自网络，版权归原作者所有，反馈可立刻删除 (该文来自笔记，点击查看原文)

这是在对一个博客模板进行移动端适配时遇到的一个场景。html结构如下：

要解决的问题是如何在不修改任何html代码的情况下，仅仅通过css实现下面的效果：

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值小的显示在前面）。