css 将样式应用于除最后一行之外的所有元素

Question

我有一个产品类别页面，每行 3 个产品。我希望每一行都有一个底部边框 except 最后一行。这应该没有边框底部。最后一行可能包含 1、2 或 3 <li>元素。

我正在使用的当前代码将 border-bottom 属性应用于每第 3 个 <li>元素，这不是我想要的。

CSS:

.products li {
    width: 33.33333%;
}

.products li:nth-child(3n){
    border-bottom: 1px rgba(51, 51, 51, 0.1) solid;
}

.products li:nth-child(2-PREVIOUS-SIBLING-ELEMENTS){
    border-bottom: 1px rgba(51, 51, 51, 0.1) solid;
}

HTML:

<ul class="products">
   <li>Product</li>
   <li>Product</li>
   <li>Product</li>
   <li>Product</li>
   <li>Product</li>
   <li>Product</li>
</ul>

Answer 1

我想我明白了。下面的第二个规则集考虑了最后一行的任意数量的产品。

.products li:nth-child(3n){
    border-bottom: 1px rgba(51, 51, 51, 0.1) solid;
}

.products li:nth-last-child(-n + 3):nth-child(3n + 1),
.products li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li {
    border: none;
}

http://jsfiddle.net/6rso3t85/

更好的 fiddle ，按要求调整显示，并显示三个用例

http://jsfiddle.net/6rso3t85/1/