天下无坑

天下无坑


如何根据子元素个数的不同定义不同的样式?

<html>

<head>
  <style>
    ul {
      display: flex;
      padding: 0;
    }

    li {
      margin: 1px;
      box-sizing: border-box;
      background-color: bisque;
      list-style: none;
      border: 1px solid #000;
      padding: 5px;
    }

    /* one item */
    li:first-child:nth-last-child(1) {
      width: 100%;
    }

    /* two items */
    li:first-child:nth-last-child(2),
    li:first-child:nth-last-child(2)~li {
      width: 50%;
    }

    /* three items */
    /* 重写所有元素 */
    li:first-child:nth-last-child(3),
    li:first-child:nth-last-child(3)~li {
      width: 33.3333%;
    }

    /* 重写倒数第一个元素 */
    li:first-child:nth-last-child(3),
    li:first-child:nth-last-child(3)~li:nth-last-child(1) {
      background-color:skyblue;
    }
    /* 重写倒数第二个元素 */
    li:first-child:nth-last-child(3),
    li:first-child:nth-last-child(3)~li:nth-last-child(2) {
      background-color: goldenrod;
    }
    /* 重写倒数第三个元素 */
    li:first-child:nth-last-child(3),
    li:first-child:nth-last-child(3)~li:nth-last-child(3) {
      background-color: yellow;
    }

    /* four items */
    li:first-child:nth-last-child(4),
    li:first-child:nth-last-child(4)~li {
      width: 25%;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</body>

</html>

页面列表

ITEM_HTML