图：Nguyen Nhut
对于列表，在有些时候针对于不同个数的item会有不同的显示，比如col份数，用js固然可以，是否可以用css更简便的实现呢？
实现
1<!DOCTYPE html>2<html>34<head>5 <title>css3</title>6 <style type="text/css">7 * {8 box-sizing: border-box;9 }1011 ul {12 width: 100%;13 margin: 0;14 padding: 0;15 font-size: 0;16 }1718 li {19 margin: 0;20 padding: 0;21 display: inline-block;22 vertical-align: top;23 font-size: 13px;24 border: 1px solid rgba(128, 128, 128, 0.5);25 margin-bottom: 10px;26 height: 100px;27 text-align: center;28 font-weight: bold;29 line-height: 100px;30 color:#fff;31 }3233 /*ul只有一个子元素的样式*/34 li:nth-last-child(1):first-child {35 width: 100%;36 background: #000;37 }3839 /*ul有2个子元素的样式*/40 /*li:nth-last-child(2):first-child, 是倒数第二个元素，又是第一个元素，说明li的父元素ul有2个子元素（起到了 判断某父元素下有几个子元素 的作用）*/41 li:nth-last-child(2):first-child,42 /* ~ 选择位于li:nth-last-child(2):first-child 即 第一个子元素之后的元素*/43 li:nth-last-child(2):first-child~li {44 width: calc(100% / 2);45 background: #202020;46 }4748 /*ul有3个子元素的样式*/49 /*第一个元素宽度为1/3，字体颜色为蓝色*/50 ul>*:nth-last-child(3):first-child {51 width: calc(100% / 3);52 background: #222;53 }5455 /*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 2 个元素）*/56 ul>*:nth-last-child(3):first-child~li:nth-last-child(2) {57 width: calc(100% / 3);58 background: #333;59 }6061 /*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 3 个元素）*/62 ul>*:nth-last-child(3):first-child~li:nth-last-child(1) {63 width: calc(100% / 3);64 background: #444;65 }66 </style>67</head>6869<body>70 <ul class="list">71 <li>one</li>72 </ul>73 <ul class="list">74 <li>two</li>75 <li>two</li>76 </ul>77 <ul class="list">78 <li>three</li>79 <li>three</li>80 <li>three</li>81 </ul>82</body>8384</html>
