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

Question

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

我正在使用的当前代码将border-bottom 属性应用于每个第三个<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

这应该可以解决问题：（在 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');
}