console 命令行工具 X clear

console

<body>
  <div class="wrap-only-child">
    <mark>.wrap-only-child>.wrap1 :nth-last-child(3)</mark>
    <div class="wrap wrap1">
      <span>wrap1-span1</span>
      <div>wrap1-div1</div>
      <span>wrap1-span2</span>
      <div>wrap1-div2</div>
      <div>wrap1-div3</div>
      <div>wrap1-div4</div>
      <span>wrap1-span3</span>
      <div>wrap1-div5</div>
      <span>wrap1-span4</span>
    </div>
    <mark>.wrap-only-child>.wrap1 :nth-last-child(2n+1)</mark>
    <div class="wrap wrap2">
      <span>wrap1-span1</span>
      <div>wrap1-div1</div>
      <span>wrap1-span2</span>
      <div>wrap1-div2</div>
      <div>wrap1-div3</div>
      <div>wrap1-div4</div>
      <span>wrap1-span3</span>
      <div>wrap1-div5</div>
      <span>wrap1-span4</span>
    </div>
  </div>

  <div class="wrap-only-of-child">
    <mark>.wrap-only-child>.wrap1 :nth-last-of-type(3)</mark>
    <div class="wrap wrap1">
      <span>wrap1-span1</span>
      <div>wrap1-div1</div>
      <span>wrap1-span2</span>
      <div>wrap1-div2</div>
      <div>wrap1-div3</div>
      <div>wrap1-div4</div>
      <span>wrap1-span3</span>
      <div>wrap1-div5</div>
      <span>wrap1-span4</span>
    </div>
    <mark>.wrap-only-child>.wrap1 :nth-last-of-type(2n+1)</mark>
    <div class="wrap wrap2">
      <span>wrap2-span1</span>
      <div>wrap2-div1</div>
      <span>wrap2-span2</span>
      <div>wrap2-div2</div>
      <div>wrap2-div3</div>
      <div>wrap2-div4</div>
      <span>wrap2-span3</span>
      <div>wrap2-div5</div>
      <span>wrap2-span4</span>
    </div>
  </div>
</body>

    body>div {
      margin: 0px 0 24px 0;
      border: 1px solid #000;
    }

    .wrap-only-child>.wrap,
    .wrap-only-of-child>.wrap {
      margin: 0px 0 24px 0;
    }

    /* 不区分类型-选择.wrap-only-child>.wrap 下的倒数第三个子元素：第三个子元素就是<span>wrap1-span2</span> */
    .wrap-only-child>.wrap1 :nth-last-child(3) {
      background-color: red;
    }

    /* 不区分类型-选择子元素的单数位元素  */
    .wrap-only-child>.wrap2 :nth-last-child(2n+1) {
      background-color: red;
    }

    /* 区分类型-选择.wrap-only-child>.wrap 下的倒数第三个子元素；因为子元素有两种div和span 所以都选择第三个 */
    .wrap-only-of-child>.wrap1 :nth-last-of-type(3) {
      background-color: red;
    }

    /* 区分类型-选择各自类型的子元素的单数位元素  */
    .wrap-only-of-child>.wrap2 :nth-last-of-type(2n+1) {
      background-color: red;
    }