从 5 个项目的循环中排除最后一个分隔符？

Question

我的问题是我有网站的购物车部分，它会在页面右侧自动选择 5 个相关产品。我添加了底部边框样式，这样您就可以分辨出每种产品之间的区别。这里的问题是有 4 个分隔线或边界线，无论您想怎么称呼它。但是，正如您在下图中看到的那样，拥有第 4 个分隔线是完全多余的，因为它已经是最后一项了。我的问题是需要添加哪些代码才能取消此样式表的最后一个分隔符。我只有 1 行代码用于添加到购物车底部边框，因为每次添加新对象时它都会重复，每次最多 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;
}

参考图片：

Answer 1

使用border-top并将其从第一个孩子中删除可能会有更好的结果:) IE8及以下，凭记忆，不支持last-child

.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 是很好的衡量标准

编辑 更新了代码并添加了一个小提琴。

Answer 2

您可以使用 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/

Answer 3

让我们分解一下，.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 以了解其工作原理。

Answer 4

不是这个

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

这样做

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

反正我就是这样做的，效果很好