use different style for different elements number

div:first-child:nth-last-child(2)

解读: div中第一元素等同于倒数第二个元素时,说明一共只有两个元素

Example

  .video:first-child:nth-last-child(1) {
    float: left;
    height: 100%;
    width: 100%;
  }

  .video:first-child:nth-last-child(2) {
    &, & ~ .video {
      float: left;
      height: 100%;
      width: 50%;
    }
  }

  .video:first-child:nth-last-child(3) {
    &, & ~ .video {
      float: left;
      height: 50%;
      width: 50%;
    }
  }

  .video:first-child:nth-last-child(4) {
    &, & ~ .video {
      float: left;
    }

    & {
      height: 100%;
      width: 70%;
    }

    & ~ :nth-child(n + 1) {
      height: 25%;
      width: 30%;
    }
  }

results matching ""

    No results matching ""