CSS3高级选择器巧用

[Tingglelaoo]

去掉两列列表最后的（偶数时最后两个，单数时是最后一个）的边框线

li {
    float: left;
    width: 50%;
    &:nth-child(odd):nth-last-child(-n+2):before {
      display: none;
    }
    &:nth-child(2n):after{
      @include border(left);
      top: 13px;
      bottom: 13px;
    }
}

:not 选择器匹配非指定元素/选择器的每个元素。

li {
  &:not(:last-child) {
    /* 除了最后一个列表项的样式*/
  }
}

第四个项和其之后的所有列表项

li:nth-child(4),li:nth-child(4)~li {
  /* 第四个项和其之后的所有列表项的样式 */ 
}

当且仅当有四个列表项时的样式

/* 定义mixin */ 
@mixin n-items($n) { 
  &:first-child:nth-last-child(#{$n}), 
  &:first-child:nth-last-child(#{$n}) ~ & {
    @content; 
  }
} 

/* 像这样使用 */ 
li { 
  @include n-items(4) { 
    /* 这里写样式 */ 
  } 
}

至少包含4个列表项时

li:first-child:nth-last-child(n+4), 
li:first-child:nth-last-child(n+4) ~ li { 
  /* 目标列表选择最少包含四个列表项 */ 
}

最多只有4个列表项目时

li:first-child:nth-last-child(-n+4), 
li:first-child:nth-last-child(-n+4) ~ li { 
  /* 选择列表项最多只有四个的列表所有子元素 */ 
}

选择包含4-6个列表项的列表所有子元素

li:first-child:nth-last-child(n+4):nth-last-child(-n+6), li:first-child:nth-last-child(n+4):nth-last-child(-n+6) ~ li{
  /*选择包含2-6个列表项的列表所有子元素*/ 
}