排除5個項目的最後一個分隔符？

我的問題是，我有網站的購物車部分，它會自動在頁面右側選取5個相關產品。我添加了底部邊框樣式，以便您可以分辨每種產品之間的區別。這裏的問題是，無論你希望如何稱呼它，都有4個分隔線或邊界線。但是，正如你在下面的圖片中看到的那樣，擁有第四個分頻器是完全多餘的，因爲它已經是最後一個項目。我的問題是需要添加哪些代碼才能將最後的分隔符取出到此樣式表中。我只有1行代碼用於添加到購物車底部邊界，因爲每次添加新對象時都會重複它自己，並且每次最多5個條目。排除5個項目的最後一個分隔符？

我要拍照，並直接上傳，但顯然你需要更多的積分只是張貼圖片，所以我在imgur上傳了照片，直到我有足夠的積分。乾杯。

代碼： HTML頁：

<div class="addToCart_bottomBorder"></div>

CSS頁面：

.addToCart_bottomBorder { 
    border-bottom: #d9d9d9 1px solid; 
    margin-top:3px; 
    margin-bottom: 5px; 
    clear:both; 
} 

.addToCart_bottomBorder li:last-child { 
    border-bottom: none; 
}

參考圖：

His problem

來源

2014-01-10 julian

我們需要看到更多的代碼能夠幫助隊友。父母是什麼？是李的父母嗎？如果是這樣的HTML無效。 –

將'.addToCart_bottomBorder'添加到'li'本身？在這種情況下，第二個選擇器可能應該是'li.addToCart_bottomBorder：last-child' – TiiJ7

我事先已經關閉了，他們甚至沒有顯示任何5個分隔符。 .addToCart_bottomBorder { \t border-bottom：＃d9d9d9 1px solid; \t margin-top：3px; \t margin-bottom：5px; \t明確：均; } .addToCart_bottomBorder：last-child { border-bottom：none; } – julian

也許使用邊框的頂部和刪除它有更好的效果從第一個孩子:) IE8及以下，從內存，不支持最後孩子

.addToCart_bottomBorder li { 
    border-top: #d9d9d9 1px solid; 
    margin-top:3px; 
    margin-bottom: 5px; 
    clear:both; 
} 

.addToCart_bottomBorder li:first-child { 
    border-top: none; 
    border-bottom: none; 
}

這裏是HTML

<ul class="addToCart_bottomBorder"> 
    <li class="">content</li><br /> 
    <li class="">content</li><br /> 
    <li class="">content</li><br /> 
    <li class="">content</li><br /> 
    <li class="">content</li><br /> 
</ul>

和好措施

編輯更新代碼jsFiddle並添加了一個小提琴。

來源

2014-01-10 16:48:00 stckrboy

由於OP將選擇器添加到錯誤的類中，因此上面的代碼不會實現任何不同。 –

IE 7及以上版本支持：第一個孩子，它是CSS 2.1規範的一部分:) - http://msdn.microsoft.com/en-us/library/ie/cc848865%28v=vs.85%29。 aspx – stckrboy

你是對的，css技巧錯了：http://css-tricks.com/almanac/selectors/f/first-child/。儘管如此，仍然不正確你的上面的代碼。 –

讓我們打破這種下來，.addToCart_bottomBorder li:last-child，

.addToCart_bottomBorder這是父

li，這是孩子

用下面選擇你的目標你的父母，.addToCart_bottomBorder的li，和然後從最後的li中刪除邊框，但由於這些樣式位於父級上，因此您不會從中刪除任何內容。

沒有更多的HTML和CSS很難告訴你如何擁有它的結構，但是這是應該如何構建。

<ul class="pickFive"> 
    <li class="addToCart_bottomBorder"> 
     Some content in here 
    </li> 
    <li class="addToCart_bottomBorder"> 
     Some content in here 
    </li> 
    <li class="addToCart_bottomBorder"> 
     Some content in here 
    </li> 
    <li class="addToCart_bottomBorder"> 
     Some content in here 
    </li> 
    <li class="addToCart_bottomBorder"> 
     Some content in here 
    </li> 
</ul>

有了這個CSS，

.addToCart_bottomBorder { 
    border-bottom: #d9d9d9 1px solid; 
    margin-top:3px; 
    margin-bottom: 5px; 
    clear:both; 
} 

.pickFive li:last-child { 
    border-bottom: none; 
}

如果您構建它像這樣的父母的最後一個孩子將沒有邊框。檢查這個JSFIDDLE看它是如何工作的。

來源

2014-01-10 16:50:09

你可以使用CSS adjacent sibling selector（+）。

假設你的HTML看起來像這樣：

<div class="addToCart_bottomBorder"> 
    <ul> 
     <li>First</li> 
     <li>Second</li> 
     <li>Third</li> 
     <li>Last</li> 
    </ul> 
</div>

然後CSS將是：

.addToCart_bottomBorder { 
    margin-top:3px; 
    margin-bottom: 5px; 
    clear:both; 
} 

.addToCart_bottomBorder li+li { 
    border-top: #d9d9d9 1px solid; 
}

小提琴：http://jsfiddle.net/M8kN2/

來源

2014-01-10 17:12:24 TiiJ7

這

.addToCart_bottomBorder li:last-child { 
border-bottom: none; 
}

事，不這

.addToCart_bottomBorder li:last-child { 
border-bottom: #FFFFFF 0px solid; 
}

這就是我這麼做了，它工作正常

來源

2014-01-10 17:15:51

排除5個項目的最後一個分隔符？

回答

相關問題