CSS选择器:使用nth-child()选择器和兄弟选择器~

<div class="wrap">
    <ul class="ulWrap clearfix">
      <li class="liItem ellipsis">标题一标题</li>
      <li class="liItem ellipsis">标题一标题一标题一标题一标题一</li>
      <li class="liItem ellipsis">标题一标题一标题一标题一标题一</li>
      <li class="liItem ellipsis">标题一</li>
      <li class="liItem ellipsis">标题一标题一标题一标题一标题一</li>
      <li class="liItem ellipsis">标题一标题一标题一标题一标题一</li>
    </ul>
    <div class="test">这里是分页</div>
</div>
  
<style>
.ellipsis {
  overflow: hidden;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  word-wrap: normal;
}
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  zoom: 1;
}
.wrap {
  width: 500px;
  background: #dfdfdf;
  padding: 0 0 20px 0;
}
.ulWrap {
  width: 500px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
}
.liItem {
  width: 240px;
  margin: 0 20px 0 0;
  padding: 15px;
  float: left;
  border-bottom: 1px solid #666;
  font-size: 16px;
}
.liItem:nth-child(2n) {
  margin-right: 0;
}
.liItem:nth-child(2n + 1):nth-last-child(-n + 2),
.liItem:nth-child(2n + 1):nth-last-child(-n + 2) ~ .liItem {
  border-bottom: 0;
}
.test {
  text-align: center;
  color: #999;
  padding-top: 20px;
}
</style>

css选择器是从右向左匹配的，nth-last-child(-n+2)选择的是容器中的最后2个元素，nth-child(2n+1)选择第（2n+1）个元素，也就是第一列的元素（因为每行展示2个元素，所以两种选择都跟2有关），两者的交集恰好就是最后一行的第一个元素，也就是左下角的这个元素。但是最后一行的元素个数也并不确定，为了完整的匹配到其后的元素，我们使用通用兄弟选择器~来选中该目标后面的兄弟元素，这样两者结合便可以保证总是找全最后一行的元素，而不用管该行是否占满。

思想是：使用两层过滤器先找到最后一行第一列的元素，然后使用兄弟选择器匹配到该行其它的元素。