css将样式应用于除最后一行中的所有元素之外的所有元素 | css将样式应用于除最后一行中的所有元素之外的所有元素

本文介绍了css将样式应用于除最后一行中的所有元素之外的所有元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个产品类别页面，每行3个产品.我希望每一行的最后一行除外都应有边框底部.这应该没有边框底.最后一行可能包含1个，2个或3个<li>元素.

I have a product category page with 3 products per row. I want every row to have a border bottom except for the last row. This should have no border bottom. The last row may contain 1, 2, or 3 <li> elements.

我正在使用的当前代码将border-bottom属性应用于每个第三个<li>元素，这并不是我想要的.

The current code that I'm using applies the border-bottom property to every 3rd <li> element, which is not quite what I want.

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>

推荐答案

我想我明白了.下面的第二个规则集说明了最后一行中任何数量的产品.

I think I figured this out. The second ruleset below accounts for any amount of products on the last row.

.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/

更好的小提琴，根据要求调整显示，并显示三个用例

A better fiddle, adjusting the display as asked, and showing the three use cases

http://jsfiddle.net/6rso3t85/1/

这篇关于css将样式应用于除最后一行中的所有元素之外的所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！