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

Question

我有一个产品类别页面，每行有3个产品。我希望每一行的最后一行都有一个除了的边框。这应该没有边框底部。最后一行可能包含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/

更好的小提琴，根据要求调整显示，并显示三个用例

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

Answer 2

这应该可以解决问题:(在FF 33上测试）

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

这是Fiddle

This是一个很棒的网站，用于测试 nth-child 的内容。

修改

你的情况非常棘手，我认为不可能只使用CSS。

我做了一个工作JSBin，它使用JavaScript来达到你想要的结果。

<强> HTML

<ul class="products">
 <li>Product</li>
 <li>Product</li>
 <li>Product</li>
 <li>Product</li>
 <li>Product</li> 
 <li>Product</li>
 <li>Product</li>
 <li>Product</li>
 <li>Product</li>
 <!-- more products -->
</ul>

<强> CSS

.products li {
    width: 30.33333%;
    border-bottom: 1px solid red;
}

<强> JS

var size = $('.products li').size();

var previous = Math.floor((size)/3)*3;
if (size % 3 === 0 ) {
  previous = size - 3;
}

for (var i = previous; i < size; i++ ) {

    $('.products li:eq(' + i + ')').css( 'border-bottom' , 'none');
}