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

参考图片：

His problem

Answer 1

使用border-top并从第一个孩子中移除它可能会有更好的结果:) 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以获得良好的衡量标准

修改的更新了代码并添加了一个小提琴。

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这就是孩子

使用以下选择器，您定位父亲li的{{1}}，然后从上一个.addToCart_bottomBorder移除边框，但由于这些样式位于您要移除的父级上他们没什么。

如果没有更多的html和css，很难说你是如何构建它的，但这就是它的结构。

li

有了这个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>

如果你这样构造它，父母的最后一个孩子将没有边框。请检查此JSFIDDLE以查看其工作原理。

Answer 4

而不是这个

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

这样做

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

这就是我如何做到这一点，它工作正常

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

4 个答案: