console 命令行工具 X clear

console

<body>
  <div class="wrap1">
    <div>div子元素</div>
    <span>span子元素</span>
    <div>div子元素</div>
    <span>span子元素</span>
  </div>

  <div class="wrap2">
    <div>div子元素</div>
    <span>span子元素</span>
    <div>div子元素</div>
    <span>span子元素</span>
  </div>

  <div class="wrap3">
    <div>div子元素</div>
    <span>span子元素</span>
    <div>div子元素</div>
    <span>span子元素</span>
  </div>

  <div class="wrap4">
    <div>div子元素</div>
    <div>div子元素</div>
    <span>span子元素</span>
    <span>span子元素</span>
  </div>

  <div class="wrap5">
    <div>div子元素</div>
    <span>span子元素</span>
    <div>div子元素</div>
    <span>span子元素</span>
  </div>

  <div class="wrap6">
    <div>div子元素</div>
    <span>span子元素</span>
    <div>div子元素</div>
    <span>span子元素</span>
  </div>
</body>

 body>div {
   margin: 24px 0;
 }
 /* 选择父元素下最后一个子元素，不区分类型 */
 
 .wrap1 :last-child {
   background-color: red;
 }
 /* 选择父元素下最后一个子元素，不区分类型，但是因为最后一个子元素是div所以就不生效了 */
 
 .wrap2 div:last-child {
   background-color: red;
 }
 /* 选择父元素下最后一个子元素，不区分类型，最后一个子元素刚好是span就不生效了 */
 
 .wrap3 span:last-child {
   background-color: red;
 }
 /* 选择父元素下最后一个子元素，区分类型，选择的是各个类型元素最后一个子元素，这里面选的就是最后一个div和最后一个span元素 */
 
 .wrap4 :last-of-type {
   background-color: red;
 }
 /* 选择父元素下最后一个子元素，区分类型，只选中div的最后一个子元素 */
 
 .wrap5 div:last-of-type {
   background-color: red;
 }
 /* 选择父元素下最后一个子元素，区分类型，只选中span的最后一个子元素 */
 
 .wrap6 span:last-of-type {
   background-color: red;
 }