排除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个项目的最后一个分隔符？

回答

相关问题