最近看了一篇张鑫旭的博客，觉得人家的想法特别奇特，很值得学习。遂借鉴学习并记录一下，以备不时之需。
原文地址：伪类匹配列表数目实现微信群头像CSS布局的技巧
简介
我们在使用微信群聊的时候，群聊的头像，是所在在群聊中的人的头像的一个组合。随着群聊成员数量的不同，群聊头像的样式也不一样。下面就是使用伪类来实现这样一个功能，让其样式随着数量的变化而变化。
以下是代码：
ul{padding: 0; margin: 0;list-style-type: none;width: 240px; height: 240px;background-color: #eee;}li {background: url(//03/13/AkieC6.jpg);background-size: 100%;outline: 1px solid #fff;}button{margin-top: 20px;}/* 1个 */li:only-child {height: 100%;}/* 2个 */li:first-child:nth-last-child(2),li:first-child:nth-last-child(2) + li{width: 50%;height: 50%;}li:first-child:nth-last-child(2) + li{margin-left: auto;}/* 3个 */li:first-child:nth-last-child(3),li:first-child:nth-last-child(3) ~ li{width: 50%;height: 50%;float: left;}li:first-child:nth-last-child(3){margin-left: 25%;}/* 4个 */li:first-child:nth-last-child(4),li:first-child:nth-last-child(4) ~ li {width: 50%; height: 50%;float: left;}/* 5个 */li:first-child:nth-last-child(5){width: 160px; height: 160px;float: left;}li:first-child:nth-last-child(5) ~ li {width: 80px; height: 80px;float: left;}/* 6个 */li:first-child:nth-last-child(6){width: 160px; height: 160px;float: left;}li:first-child:nth-last-child(6) ~ li {width: 80px; height: 80px;float: left;}/* 7个 */li:first-child:nth-last-child(7){width: 80px; height: 80px;margin: auto;}li:first-child:nth-last-child(7) ~ li {width: 80px; height: 80px;float: left;}/* 8个 */li:first-child:nth-last-child(8){width: 80px; height: 80px;margin-left: 40px;float: left;}li:first-child:nth-last-child(8) ~ li {width: 80px; height: 80px;float: left;}/* 9个 */li:first-child:nth-last-child(9),li:first-child:nth-last-child(9) ~ li {width: 80px; height: 80px;float: left;}</style>
以下是实现效果：
原文地址：伪类匹配列表数目实现微信群头像CSS布局的技巧
