first-child/nth-last-child伪类与动态列表布局实例页面

CSS代码：

ul {
  padding: 0; margin: 0;
  list-style-type: none;
  width: 240px; height: 240px;
  background-color: #eee;
}
li {
  background: url(https://image.zhangxinxu.com/image/study/head/s180/14.jpeg);
  background-size: 100%;
  outline: 1px solid #fff;
}
/* 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%;
}
li:first-child:nth-last-child(3) {
  margin: auto;
}
li:first-child:nth-last-child(3) ~ li {
  float: left;
}
/* 4个 */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
  width: 50%; height: 50%;
  float: left;
}
/* 5个和6个 */
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(6) {
  width: 160px;
  height: 160px;
  float: left;
}
li:first-child:nth-last-child(5) ~ li,
li:first-child:nth-last-child(6) ~ li {
  width: 80px;
  height: 80px;
  float: left;
}
/* 7个 8个 9个 */
li:first-child:nth-last-child(7),
li:first-child:nth-last-child(8),
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(7) ~ li,
li:first-child:nth-last-child(8) ~ li,
li:first-child:nth-last-child(9) ~ li {
  width: 80px;
  height: 80px;
  float: left;
}
li:first-child:nth-last-child(7) {
  float: none;
  margin: auto;
}
li:first-child:nth-last-child(8) {
  margin-left: 40px;
}

HTML代码：

<h4>1个头像</h4>
<ul><li></li></ul>
<h4>2个头像</h4>
<ul><li></li><li></li></ul>
<h4>3个头像</h4>
<ul><li></li><li></li><li></li></ul>
<h4>4个头像</h4>
<ul><li></li><li></li><li></li><li></li></ul>
<h4>5个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li></ul>
<h4>6个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<h4>7个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<h4>8个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<h4>9个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>