first-child/nth-last-child动态列表数量匹配技术实例页面

展示

代码

• HTML：

  <div class="cs-box">
      <div class="cs-li"></div>
  </div>
  <div class="cs-box">
      <div class="cs-li"></div><div class="cs-li"></div>
  </div>
  <div class="cs-box">
      <div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div>
  </div>
  <div class="cs-box">
      <div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div>
  </div>
  <div class="cs-box">
      <div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div>
  </div>
  <div class="cs-box">
      <div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div>
  </div>
  <div class="cs-box">
      <div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div>
  </div>
  <div class="cs-box">
      <div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div>
  </div>
  <div class="cs-box">
      <div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div><div class="cs-li"></div>
  </div>

• CSS：

  .cs-box {
    float: left;
    width: 120px; height: 120px;
    margin: 10px 15px;
    background-color: #e0e0e0;
  }
  .cs-li {
    background: url(/images/common/l/1.jpg) center;
    background-size: cover;
    outline: 1px solid #fff;
  }
  /* 1个 */
  .cs-li:only-child {
    height: 100%;
  }
  /* 2个 */
  .cs-li:first-child:nth-last-child(2),
  .cs-li:first-child:nth-last-child(2) + .cs-li {
    width: 50%; height: 50%;
  }
  .cs-li:first-child:nth-last-child(2) + .cs-li {
    margin-left: auto;
  }
  /* 3个 */
  .cs-li:first-child:nth-last-child(3),
  .cs-li:first-child:nth-last-child(3) ~ .cs-li {
    width: 50%; height: 50%;
  }
  .cs-li:first-child:nth-last-child(3) {
    margin: auto;
  }
  .cs-li:first-child:nth-last-child(3) ~ .cs-li {
    float: left;
    position: relative;
  }
  /* 4个 */
  .cs-li:first-child:nth-last-child(4),
  .cs-li:first-child:nth-last-child(4) ~ .cs-li {
    width: 50%; height: 50%;
    float: left;
  }
  /* 5个和6个 */
  .cs-li:first-child:nth-last-child(5),
  .cs-li:first-child:nth-last-child(6) {
    width: 80px;
    height: 80px;
    float: left;
  }
  .cs-li:first-child:nth-last-child(5) ~ .cs-li,
  .cs-li:first-child:nth-last-child(6) ~ .cs-li {
    width: 40px;
    height: 40px;
    float: left;
  }
  /* 7个 8个 9个 */
  .cs-li:first-child:nth-last-child(7),
  .cs-li:first-child:nth-last-child(8),
  .cs-li:first-child:nth-last-child(9),
  .cs-li:first-child:nth-last-child(7) ~ .cs-li,
  .cs-li:first-child:nth-last-child(8) ~ .cs-li,
  .cs-li:first-child:nth-last-child(9) ~ .cs-li {
    width: 40px;
    height: 40px;
    float: left;
  }
  .cs-li:first-child:nth-last-child(7) {
    float: none;
    margin: auto;
  }
  .cs-li:first-child:nth-last-child(8) {
    margin-left: 16.666%;
  }