使用伪类来实现类似微信群聊的头像样式

最近看了一篇张鑫旭的博客，觉得人家的想法特别奇特，很值得学习。遂借鉴学习并记录一下，以备不时之需。

原文地址：伪类匹配列表数目实现微信群头像CSS布局的技巧

简介

我们在使用微信群聊的时候，群聊的头像，是所在在群聊中的人的头像的一个组合。随着群聊成员数量的不同，群聊头像的样式也不一样。下面就是使用伪类来实现这样一个功能，让其样式随着数量的变化而变化。

以下是代码：

ul{
  padding: 0; margin: 0;
  list-style-type: none;
  width: 240px; height: 240px;
  background-color: #eee;
}
li {
  background: url(https://s2.ax1x.com/2019/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布局的技巧