SOURCE

console 命令行工具 X clear

                    
>
console
<body>
  <div class="wrap-only-child">
    <div class="wrap">
      <span>wrap1-span1</span>
    </div>

    <div class="wrap">
      <div>wrap2-div1</div>
    </div>

    <div class="wrap">
      <span>wrap3-span1</span>
      <div>wrap3-div1</div>
    </div>

    <div class="wrap">
      <span>wrap4-span1</span>
      <span>wrap4-span2</span>
      <div>wrap4-div1</div>
      <div>wrap4-div2</div>
    </div>
  </div>

  <div class="wrap-only-of-child">
    <div class="wrap">
      <span>wrap1-span1</span>
    </div>

    <div class="wrap">
      <div>wrap2-div1</div>
    </div>

    <div class="wrap">
      <span>wrap3-span1</span>
      <div>wrap3-div1</div>
    </div>

    <div class="wrap">
      <span>wrap4-span1</span>
      <span>wrap4-span2</span>
      <div>wrap4-div1</div>
      <div>wrap4-div2</div>
    </div>
  </div>
</body>
body>div {
  margin: 24px 0;
}

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


/* 不区分类型-选择.wrap-only-child .wrap下唯一一个子元素 */

.wrap-only-child .wrap :only-child {
  background-color: red;
}


/* 区分类型-选择.wrap-only-child .wrap下唯一一个子元素 */

.wrap-only-of-child .wrap :only-of-type {
  background-color: red;
}