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;
}

這是一個小提琴

這是一個測試n-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');
}