我有一个无序的列表,可以包含偶数或奇数个项目。我正在寻找一个CSS的唯一方式,以从最后2 li标记删除边框,如果lis的数量是偶数。 :last-child伪选择器删除最后一个。
li { float: left; border-bottom: 1px solid #000; } li:last-child{ border-bottom: none; }
适用于奇数
+============================================+ + 1 | 2 + +--------------------------------------------+ + 3 | + +============================================+
+============================================+ + 1 | 2 + +--------------------------------------------+ + 3 | 4 + +--------------------- + +============================================+
所以我想我可以使用li:nth-last-child()但我不知道应该是什么应该是抓住最后一个奇怪的孩子。
它不是2n 1,2n-1,n-1,或任何我可以想到的。请帮忙。
解决方法
第n个最后一个孩子从最后一个孩子向后计数,所以要抓住第二个到最后一个,表达式是:
li:nth-last-child(2)
你可以组合伪选择器,所以选择第二个到最后一个孩子,但只有当它奇怪,使用:
li:nth-last-child(2):nth-child(odd) {border-bottom: none;}
所以,整个事情应该是:
li:last-child,li:nth-last-child(2):nth-child(odd) {border-bottom: none;}
在回答@ ithil的问题,这里是我怎么写在SASS:
li &:last-child,&:nth-last-child(2):nth-child(odd) border-bottom: none
这不是那么简单,因为“第二个到最后一个奇数孩子”的选择总是需要“两步”选择器。
在回答@ Caspert的问题,你可以通过分组更多的选择器来做任意多的最后一个元素(有感觉像应该有一些xn y模式做这个没有分组,但AFAIU这些模式只是工作从最后一个元素)。
最后三个元素:
li:last-child,li:nth-last-child(2):nth-child(odd),li:nth-last-child(3):nth-child(odd) {border-bottom: none;}
这是一个像SASS这样的地方可以帮助,为你生成选择器。我将它构造为一个占位符类,并使用它扩展元素,并设置变量中的列数,如下所示:
$number-of-columns: 3 %no-border-on-last-row @for $i from 1 through $number-of-columns &:nth-last-child($i):nth-child(odd) border-bottom: none //Then,to use it in your layout,just extend: .column-grid-list li @extend %no-border-on-last-row